CSS那些事儿-阅读随笔3(清除浮动)_html/css_WEB-ITnose
一、浮动现象例子
下面举一个很简单的浮动的例子,假设一个float_box(背景色为 #aff )中包含两个div,且一个是左浮动(float:left),另一个是右浮动(float:right)。在float_box外再添加一个没有浮动属性的div(no_float),那么代码以及预期效果和实际效果如下:
1 2 3 4 5css-test 6 27 28 293033左浮动元素31右浮动元素32测试位置34 35 36 View Code
a.预期效果 b.实际效果
图1 效果图
二、消除浮动的方法
1.利用br元素的clear属性
br标签属性中的clear属性具有left、right和all三个属性值,可以用来清除浮动。但是此种方法需要引入一个额外的br标签,破坏了HTML的原有结构。代码如下:
1 2 3 4 5css-test 6 30 31 323337左浮动元素34右浮动元素35
36测试位置38 39 View Code
效果如图1(a)所示。
2.利用css样式中的clear属性
a.引入br标签,但是为其添加css修饰.clear_float{clear:both;},代码如下:
1 2 3 4 5css-test 6 33 34 353640左浮动元素37右浮动元素38
39测试位置41 42 View Code
效果如图1(a)所示。
b.在发生浮动的元素后的元素中添加.clear_float{clear:both;},避免引入多余的HTML元素,代码如下:
1 2 3 4 5css-test 6 33 34 353639左浮动元素37右浮动元素38测试位置40 41 View Code
效果如下图:
可以从上图中看出,虽然这种方法清除了浮动的错误,但是float元素的父元素高度没有适应float元素的高度(背景没颜色)。
3.利用css中的overflow属性
为float元素的父元素添加css属性overflow:hidden,也可以清除浮动且高度适应。但是该属性会使div溢出部分隐藏,存在弊端。代码如下:
1 2 3 4 5css-test 6 28 29 303134左浮动元素32右浮动元素33测试位置35 36 View Code
效果如图1(a)所示。
注:overflow:visible清除浮动只对ie浏览器有效,overflow:auto清除浮动且多层嵌套时,会对点击事件产生影响。
4.利用css中的display:table属性
为float元素的父元素添加css属性display:table,也可以清除浮动且高度适应。但是会引起意想不到的后果。代码如下:
1 2 3 4 5css-test 6 28 29 303134左浮动元素32右浮动元素33测试位置35 36 View Code
效果如下图所示:
5.利用css伪对象::after
清除浮动的条件之一是必须在浮动元素之后,因此只能利用::after而不使用::before (对于ie浏览器,需要9或以上才支持),代码如下:
1 2 3 4 5css-test 6 33 34 353639左浮动元素37右浮动元素38测试位置40 41 View Code
效果如图1(a)所示。
注:对于ie浏览器,上述方法都需要在.float_box中添加zoom:1属性,来消除ie的haslayout效果。
推荐阅读
-
清除浮动全面解读(摘自网摘那些年我们一起清除过的浮动)_html/css_WEB-ITnose
-
CSS那些事儿-阅读随笔3(清除浮动)_html/css_WEB-ITnose
-
CSS那些事儿-阅读随笔3(清除浮动)_html/css_WEB-ITnose
-
CSS那些事儿-阅读随笔1(CSS简介与选择符)_html/css_WEB-ITnose
-
CSS3 target 伪类不得不说那些事儿(纯CSS实现tab切换)_html/css_WEB-ITnose
-
CSS那些事儿-阅读随笔1(CSS简介与选择符)_html/css_WEB-ITnose
-
CSS3 target 伪类不得不说那些事儿(纯CSS实现tab切换)_html/css_WEB-ITnose
-
css 3种清除浮动方法_html/css_WEB-ITnose
-
css 3种清除浮动方法_html/css_WEB-ITnose
-
清除浮动3-父级元素定高度_html/css_WEB-ITnose