浮动元素的特点:
1.脱离标准流的控制,浮动的盒子不再保留原先的位置
2.行内元素具有浮动,可直接设置宽高属性
3.块级元素没设置宽度,默认宽度和父级一样宽,但是添加浮动后,大小由内容决定
4.浮动的盒子中间没有空隙
为什么清除浮动:
很多情况下,父元素不方便设置高度,高度由子元素撑起,但子元素浮动,就会影响下面的父级元素的排版,为了不影响下面的父元素,就需要清除浮动
== 如何清除浮动:==
1.额外标签法:
在浮动元素之后添加一个同级块元素,并清除浮动(clear)
优点:通俗易懂,书写方便,W3C推荐使用
缺点:结构化差
2.给浮动元素的父级元素添加overflow属性(hidden,auto,scrll)
优点:代码简洁
缺点:无法显示溢出的部分
3.::after伪元素法:
给浮动元素的父级添加
.footer::after{
content:"",
display:block,
height:0,
clear:both,
visibility:hidden
}
优点:没有增加标签。结构更简单
缺点:照顾低版本浏览器