CSS清浮动办法
骨灰级解决办法:
.clear{clear:both;height:0;overflow:hidden;}
上诉办法是在需要清除浮动的地方加个div.clear或者br.clear,我们知道这样能解决基本清浮动问题。
但是这种方法的最大缺陷就是改变了html结构,虽然只是加个div。
最优浮动闭合方案(这是我们推荐的):
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{*+height:1%;}
用法很简单,在浮动元素的父云素上添加class=”demo clearfix”。
你会发现这个办法也有个弊端,但的确是小问题。改变css写法就ok了:
.demo:after,.demo2:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.demo,.demo2{*+height:1%;}
以上写法就避免了改变html结构,直接用css解决了。
很拉轰的浮动闭合办法:
.clearfix{overflow:auto;_height:1%}
这种办法是我看国外的一篇文章得到的方案,测试了,百试不爽,真的很简单,很给力。喜欢的同学也可以试试这个办法。
这种方法是端友radom提供的,测试通过:
.clearfix{overflow:hidden;_zoom:1;}
感谢radom提供的这种方法!!
CSS清浮动办法的更多相关文章
- CSS清浮动处理(Clear与BFC)
在CSS布局中float属性经常会被用到,但使用float属性后会使其在普通流中脱离父容器,让人很苦恼 1 浮动带来布局的便利,却也带来了新问题 <!doctype html> <h ...
- css清浮动与动态计算元素宽度
css常用清浮动写法 /*清除浮动*/| .clears:after{ display: block; content: ''; clear: both; height: ; visibility: ...
- CSS清浮动
× 目录 [1]定义 [2]方法 [3]兼容 前面的话 人们经常谈起清浮动,其实就是解决浮动元素的包含块高度塌陷的问题 定义 clear 清除 值: left | right | both | non ...
- CSS清浮动方法总结
浮动----会使当前标签产生上浮效果,从而导致父标签高度塌陷的问题 1. 给父元素指定高度 <div style="height:200px"> <div sty ...
- css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$('.float')
一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer"> <div class=&quo ...
- CSS浮动与清浮动
浮动 ( float css属性) float : left right Elements are floated horizontally, this means that an element c ...
- 【转】css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?
摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响? 一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...
- 细微之处:比较两种CSS清除浮动的兼容
http://www.cnblogs.com/bienfantaisie/archive/2011/05/27/2059597.html 清除浮动是连续浮动元素之后的必备工作,在工作中我做到需要清除浮 ...
- float布局打破标准流,神助攻clear清浮动
布局是什么?根据功能划分小块,再根据设计稿还原,书写静态页面,然后再在块里面填充内容,完善功能,js施加交互效果.div作为一个容器,独占一行,代码书写习惯从上至下属于标准流,而浮动float的css ...
随机推荐
- php中empty(),isset(),is_null(),==,===区别
有关 PHP 的 empty(),isset() 还有 is_null() 这三个函数的用法讨论得已经很多了,而且很多资料也未必能说得很清楚.这里再重复一次,但不是从概念去说,直接用程序例子来说话,应 ...
- 面向对象课程 - 寒假第三次作业 - C++计算器项目初始部分
C++计算器项目初始部分 零.项目源文件地址 传送门:calculator 一.项目信息相关: 项目:Calculator 版本:1.0 日期:2016.2.16 实现: 基本的操作界面 对四则运算表 ...
- SAP CX Upscale Commerce : SAP全新推出的电商云平台
大家好,我是Andy Chen,是SAP成都研究院年轻的SAP CX Upscale Commerce (后面将会以Upscale简称)开发团队的一名产品经理.CX的全称是Customer Exper ...
- 【转载】uWSGI配置翻译
英文原版: http://uwsgi-docs.readthedocs.io/en/latest/Options.html 转载地址: http://www.cnblogs.com/zhouej/ar ...
- 1034. [ZJOI2008]泡泡堂【贪心】
Description 第XXXX届NOI期间,为了加强各省选手之间的交流,组委会决定组织一场省际电子竞技大赛,每一个省的代表 队由n名选手组成,比赛的项目是老少咸宜的网络游戏泡泡堂.每一场比赛前,对 ...
- python中numpy.sum()函数
讲解清晰,转载自:https://blog.csdn.net/rifengxxc/article/details/75008427 众所周知,sum不传参的时候,是所有元素的总和.这里就不说了. 1 ...
- pytest 框架自动化Selenium 之yield 使用
环境 python 3.7 由于3.0-3.5以下部分pytest可能有部分兼容问题安装建议2.7-2.9,3.5-最新 pip install pytest专属 pytest框架包 pip inst ...
- Mac OS X 命令行用户应当知道的八个终端工具
原文链接:Eight Terminal Utilities Every OS X Command Line User Should Know OS X 的Terminal 终端开辟了强大的UNIX实 ...
- 【ps】Photoshop
Photoshop Cs6 存在百度云上 另外,想用切图插件cutterman,则必须安装相匹配的ps版本
- 转载:【架构师之路】依赖注入原理---IoC框架
原文地址:http://www.cnblogs.com/jhli/p/6019895.html 1 IoC理论的背景 我们都知道,在采用面向对象方法设计的软件系统中,它的底层实现都是由N个对象 ...