浮动的特点
1.浮动元素会脱标,在标准流中不占位置
2.浮动元素比标准流高出半个级别,可以覆盖标准流中的元素
3.浮动找浮动(同方向浮动),下一个浮动元素会在上一个浮动元素后面左右浮动
4.浮动元素会受到上面元素边界的影响
5.浮动元素有特殊的显示效果:① 一行可以显示多个 ② 可以设置宽
浮动布局注意事项
浮动一般情况下和标准流的父盒子一起搭配使用.
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置
浮动的时候,当父元素装不下浮动的子元素时,子元素内部会换行显示
浮动的盒子只会影响浮动盒子后面的标准流.不会影响前面的标准流
清除浮动
为什么要清除浮动
如果子元素浮动了,假设父元素不给高度,父元素的高度为0;此时子元素不能撑开标准流的块级父元素,
原因:子元素浮动后脱标 → 不占位置
目的:需要父元素 有高度,从而不影响其它网页的布局
清除浮动的五种方法
1 给父元素设置高度
2 额外标签法 :在最后添加一个块级元素的盒子 . .clear{clear:both;}
3 单伪元素清除法(京东)
.clearfix::after{
content:'';
display:block;
clear:both;
height:0;
visibility:hidden;
}
4 双伪元素清除法(小米)
.clearfix::before,
.clearfix::after {
content: '';
display: table;
}
.clearfix::after {
clear: both;
}
5 给父元素设置 overflow: hidden;