css浮动和清除浮动

浮动

浮动将元素排除在普通流之外，即元素将脱离文档流，不占据空间。浮动元素碰到包含它的 边界或者浮动元素的边界停留

• 脱离标准流，不占位置

• 浮动比标准流高半个级别，会覆盖标准流

• 浮动找浮动（同方向浮动），下一个浮动元素会在上一个浮动元素后面左右浮动

• 浮动元素受边界影响

• 浮动的元素有特殊效果（浮动元素具有行内块元素特性并且顶部对齐）父元素里浮动的子元素太多，子元素就会换行显示

• 子浮动，父不浮动

• 兄弟一起浮

• 一浮全浮

为什么要清除浮动

1. 子元素浮动后，不占位置，父元素的高度无法被撑开，影响与父元素同级的元素；
2. 与浮动元素同级的非浮动元素（内联元素）会跟随其后；
3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构解决方法

清除浮动的方法

1. 直接给宽高

   简单粗暴，字面意思。给浮动的父元素直接给宽高

   浮动盒子宽高是100px 100px ,给它的父元素宽高 100px 100px

2. 给父元素overflow：hidden

3. 额外标签法

   在浮动对象的父盒子最后添加一对div标签，并给它clear: both;属性

4. 单标签伪元素清除法

   给浮动对象的父元素添加.claerfix::after

   .claerfix::after {
           content: '';
           display: table;
           clear: both;
       }
   

5. 双标签伪元素清除法 给浮动的父元素添加.claerfix::after,.claerfix::before

   .claerfix::after,
   .claerfix::before{
       content: '';
       display: table;
       clear: both;
   }