css布局-浮动（float）

一、float 属性值，有三个：

float: left; // 靠左浮动
float: right; // 靠右浮动
float: none; // 不使用浮动

float的原理：脱离标准文档流，进行左右浮动进行float流，后面的元素向上移动，覆盖块级元素，内联元素不会覆盖，见缝插入
浮动使用后要马上清除
二、设置浮动后会造成:

1. 父元素高度塌陷
2. 影响浮动元素后面的元素（后面的元素上浮）
3. 自身宽高，变成内容的宽高
4. 浮动元素不遮盖内容

三、解决父元素塌陷问题：

1. 使用clear属性清除浮动 left right both
   在浮动元素后使用一个空元素如

   <div class="clear"></div>
   

   并在CSS中

   .clear{clear:both;}
   

2. 直接给父元素加高度

3. 为父元素设置一个overflow:hidden;

4. 父元素和子类一起浮动（不推荐）

5. 为塌陷的父元素添加一个after伪类

   	.border1,.border2{
           background-color: rgb(19, 19, 34);
       }
       .clearfix::after{
           content: ""; 
           display: block; 
           height: 0; 
           clear: both; 
           visibility: hidden;  
       }
       .border1 div{
           border: 1px solid red;
           background-color: aquamarine;
           height: 50px;
           width: 50px;
           margin-bottom: 50px;
           text-align: center;
           line-height: 50px;
           float: left;
       }