标准流:HTML元素默认的排列的规则。
浮动流:给元素添加float属性后,将元素从标准流中脱离出来。在标准流上新建一个层,在该层上所有元素都在一行显示。
浮动:给元素加float属性。给元素加float属性后,会使元素从标准流中脱离,在浮动流中按照新的规则进行排列。
浮动的影响:
从位置角度考虑:
1、标准流中的文本,会对浮动元素形成环绕效果
2、两个上下关系的元素,如果都没设置浮动,二者之间上下的margin值为较大值。设置浮动后,为二者之和。
3.浮动的元素会先判断HTML结构中,前面标签的类型。如果是块级元素,且未设置浮动,则在浮动时,浮动元素会在块元素下方浮动。
4.元素向右浮动时,元素的显示顺序为逆序。
从元素角度考虑:
5.一切都 变为块元素
6.如果没设置宽度,则浮动后元素的宽度为最小宽度
7.浮动时,空间不够时,自动换行
8.浮动后,标准流中的原有位置丢失。
浮动所带来的问题:
如果父元素没有设置高度,父元素会塌陷。
解决方案:1给父元素设置高度
2.给父元素添加overflow:hidden
3.给父元素后面的兄弟元素添加clear属性
4.给父元素设置一个类名,添加该类样式:
.clearFloat:after{
content:"";
display:block;
clear:both;
}