大家知道,在流式布局里最常见的布局工具就是浮动和定位。
- 形成脱标
一旦元素设置为了浮动,那么元素就会形成脱标。什么是脱标,脱标指的就是元素脱离原来的位置,浮动在其他没有设置浮动的元素之上。没有设置浮动的元素可以占领设置了浮动的元素的位置,即浮动的元素已经脱离标准文档流。
-
具有行内块元素的特征
浮动的元素会自动有了行内块元素的特征,即变成了行内块元素,无论是块元素,还是行元素设置了浮动,都会变成行内块元素,并且具有了行内块元素的特征:可以设置宽高,几个元素可以同时占领一行的特征。 -
什么时候用浮动呢?内部排列左右元素位置
一般在设计布局方面,用标准流的父元素。排列上下位置之后,内部元素采取浮动设置左右位置。一般要加浮动着同一元素下的盒子,全部加浮动。 -
那时候清除浮动?清楚浮动本身就是清除浮动元素造成的影响。
就是由于父亲盒子很多情况下是不方便给高度的,但是子盒子浮动又不占有位置,最后父亲盒子高度为零时,就会影响下面的标准流盒子。此时就要清除浮动。例如淘宝的图片商品链接,因为根本就不知道到底有多少链接,随时也可能要加链接。所以父元素是不适合给高度,只能清楚浮动,让父元素自动检测高度。
因为父亲盒子里面的那些元素是需要用浮动来排列左右位置的,而父亲盒子又不方便给高度,此时就清除浮动,然后让父亲外部其实是有高度的,是根据里面的浮动元素拥有的高度。
清除浮动之后,父亲就会根据浮动的子元素自动检测高度,父亲就有了高度。
- 清除浮动的几种方法(3种)
①给父级添加样式overflow:hidden(overflow的属性取值:visible hidden scroll auto 具体用法自己查阅)清楚浮动
②额外标签法:clear:both。
额外标签法是W3C推荐的做法,它具体做法就是在所有浮动元素的最后再添加一个标签,再在这个标签的样式添加clear:both
③添加双伪元素法 ::after
<div class="clearfix"></div>
<style>
.clearfix::after{
content:"";
height=0;
display:block;
visibility:hidden;
clear:both;
}
.clearfix{
*zoom:1;
}
</style>
用clear清除浮动往往会多添加一个div标签,这个标签仅仅是为了清除浮动添加的,没有任何其他意义,所以一般都不建议使用这种方法来清除浮动。
用overflow: hidden的这种方法,清除浮动一般会隐藏超出来的元素部分,所以也不太建议使用这种方法。
所以建议使用最后一种双伪元素方法清除浮动。