css中的浮动这个样式是很特殊的。了解浮动之前,一定要先了解一下什么是标准流。
标准流是浏览器在解析标签时默认遵守的规则,也叫做文档流。
为什么要说标准流呢?因为一般情况下(不浮动时),所有的标签都是标准流,而浮动是一种脱离了标准流的技术。
那么现在我们再来说一下浮动的特性:
1.浮动后的元素会在排序的时候靠上对齐。
2.浮动对标准流有影响,浮动后的元素会覆盖在标准流元素的上面。
3.浮动的规则:浮动找浮动,不浮动找不浮动。
4.浮动是以自己在没有脱离标准流之前的位置为基准进行浮动的。
5.浮动会改变元素的显示方式:变为inline-block。
6.左浮动找左浮动,右浮动找右浮动。
7.文字元素会给浮动元素让位。
那么如果页面发生了浮动,我们该如何确定页面布局呢?
a.找到不浮动元素,以标准流的形式解析。
b.找到浮动的元素,以浮动的规则解析。
注:浮动后的元素所在位置是它所在的标准流的位置(它会覆盖标准流)。
float:left和display:inline-block的区别是,两个并列盒子都应用float:left之后,它们的上边框线会对齐,而display:inline-block则使他们的下边框线对齐。
有时(不设置父盒子的高,而子盒子浮动),浮动也会对我们页面的布局造成一定的副作用,为了消除这种副作用,我们需要清除浮动。
清楚浮动之前我们要先知道,到底什么可以清除浮动:对浮动元素相邻的元素应用clear属性。clear属性值可以是left、right、both或none,它表示框的哪些边不应该挨着浮动框。在清理元素时,浏览器的处理方式是在元素的顶上添加足够的外边距,使元素的顶边缘垂直下降到浮动框下面。
所以我们下面应用clear属性清除的方法都是同一个原理:添加一个新的元素,对其应用clear:both,这个被清理元素会在它的顶外边距上添加空间,所以将浮动元素的位置留出来,并撑开浮动元素的父盒子,实现了清除浮动。
总结起来,清除浮动具体有以下几种实现方法:
1.额外标签法。(使用方法:在需要清除浮动的地方加一个额外的标签,使用clear:both;样式进行清除)(不推荐使用,因为会平添大量的额外标签。)
2.使用overflow:hidden.(使用方法:在被浮动影响的元素样式中加入overflow:hidden;)
overflow:hidden原理:触动底层BFC(block formatting context,块级独立化上下文),分配独立渲染区域。
(不推荐使用,浮动与定位结合使用时会发生冲突。)
3.*使用伪元素清除。(使用方法:在需要清除的位置加入clearfix类,并在css中加入以下代码。)
.clearfix:after{ /*在内容的末尾添加新内容*/
content: ""; /*添加内容*/
height: 0; /*使新内容不占据垂直空间*/
display: block; /*使新内容可以有外边距*/
overflow: hidden; /*使新内容不被显示*/
visibility: hidden; /*使新内容不被显示*/
clear: both; /*生成顶外边距核心代码*/
}
.clearfix{
*zoom: 1;/*用来兼容IE6/7*/
}
4.使用双伪元素清除。(推荐)(使用方法与3相同)
.clearfix:after, .clear:before{
content: "";
display: table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom: 1;
}
5.设置高(不算清除浮动的方法,但可以消除浮动的影响).