引言 - float 有哪些特性
破坏性
float 破坏了父标签的原本结构,使父标签出现了塌陷现象。导致这一现象的最根本原因在于:被设置了 float 的元素会脱离文档流(可以清空格)。
包裹性
为 div 设置了 float 之后,其宽度会自动调整为包裹住内容宽度,而不是撑满整个父容器。
例题
例题:写一个左边固定宽度,右边自适应的两栏布局
<div id="left"></div>
<div id="right"></div>
#left {
float: left;
width: 200px;
}
#right {
width: 100%;
margin-right: -200px;
}
那么上题的基础上如何清除浮动?
什么是清除浮动 - clearfix
在非IE浏览器下,当容器的高度为auto,且容器的内容中有浮动的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫清除浮动。
清除浮动的方法
方法一:clear:both
- 在浮动元素后使用一个空元素如
<div class="clear"></div>
,并在CSS中赋予.clear{clear:both;}
属性即可清理浮动。
实现原理:通过引入清除区域,这个相当于加了一块看不见的框把定义clear属性的元素向下挤。
优点:简单,代码少,浏览器兼容性好。
缺点:需要添加大量无语义的html元素,代码不够优雅,后期不容易维护。 - 使用邻接元素处理,直接给浮动元素后面的元素添加
clear:both;
属性。 - <推荐>使用CSS的
:after
伪元素和IEhack
(这里的 IEhack 指的是触发 hasLayout)
实现原理:通过将这个类添加到父容器当中,会在父容器的末尾增加了一个高度为0、具有清除属性的、不可见的块级元素。
这种方法清除浮动是相对完美的一种清除浮动,利用
:after
和:before
来在元素内部插入两个元素块,从而达到清除浮动的效果。其实现原理类似于clear:both
方法,只是区别在于:clear
在html插入一个div.clear
标签,而clearfix
利用其伪类clear:after
在元素内部增加一个类似于div.clear
的效果。
使用方法:给浮动元素的容器添加一个clearfix
的class,然后给这个class添加一个:after
伪元素实现元素末尾添加一个看不见的 Block element 清理浮动。
. clearfix {
zoom: 1;
}
/*==for IE6/7 Maxthon2==*/
. clearfix :after {
clear: both;
content: '.';
display: block;
width: 0;
height: 0;
visibility: hidden;
}
/*==for FF/chrome/opera/IE8==*/
-
clear:both;
指清除所有浮动; -
content: '.'; display:block;
对于FF/chrome/opera/IE8浏览器是不可或缺的,其中content
可以取值也可以为空。 -
visibility:hidden;
的作用是允许浏览器渲染它,但是不显示出来,这样才能实现清楚浮动。 - 为了IE6和IE7浏览器,要给
clearfix
这个class添加一条zoom:1;
触发haslayout。
优点:可以完美兼容当前主流的各大浏览器。
补充学习:
Flex 布局教程 - 阮一峰
经典的“圣杯布局”和“双飞翼布局”
方法二:触发浮动元素父元素的 BFC
BFC能清理浮动主要运用的是它的布局规则:
- 内部的Box会在垂直方向,一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时,浮动元素也参与计算
浮动清理利用的主要是第六条规则,只要将父容器触发为BFC,就可以实现包含的效果。
如何创建BFC:浅谈CSS盒模型
总结
- 使用:after伪元素方法作为主要清理浮动方式,文档结构更加清晰。
- 在小模块如ul里使用overflow:hidden;(留意可能产生的隐藏溢出元素问题)
- 如果本身就是浮动元素则可自动清除内部浮动,无需格外处理
- 正文中使用邻接元素清理之前的浮动。
特别提醒:当一个内层元素是浮动的时候,如果没有关闭浮动时,其父元素也就不会再包含这个浮动的内层元素,因为此时浮动元素已经脱离了文档流。
最后,希望大家阅后掌握清除浮动的方法,根据需要进行灵活选择。