css浮动

浮动的特点

1.浮动元素会脱标，在标准流中不占位置

2.浮动元素比标准流高出半个级别，可以覆盖标准流中的元素

3.浮动找浮动(同方向浮动)，下一个浮动元素会在上一个浮动元素后面左右浮动

4.浮动元素会受到上面元素边界的影响

5.浮动元素有特殊的显示效果：① 一行可以显示多个 ② 可以设置宽

浮动布局注意事项

1. 浮动一般情况下和标准流的父盒子一起搭配使用.

先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置

1. 浮动的时候,当父元素装不下浮动的子元素时,子元素内部会换行显示

2. 浮动的盒子只会影响浮动盒子后面的标准流.不会影响前面的标准流

清除浮动

为什么要清除浮动

如果子元素浮动了，假设父元素不给高度,父元素的高度为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;