CSS之浮动简介,以及清除浮动的方法。

三种布局模型：

• 流动模型
• 浮动模型
• 层模型

流动模型:

流动模型就是正常的布局。

浮动模型：

特征：

1. 浮动模型会找最近的元素进行贴浮。
2. 当后面的浮动元素不能放下一个浮动元素，那么这个浮动元素会出现在下一行。
3. 如果是右浮动顺序为从右向左，左浮动为从右向左。
4. 行内元素设置了浮动之后可以设置宽高。
5. 块元素在设置了浮动之后可以，宽高是由内容撑起的（但可以自行设置宽高）。
6. 脱离文档流，如果说浮动的元素下面是一个块元素，那么浮动的元素会压住块元素但不会压住块元素的内容。

设置浮动的注意事项：

同级元素要么y全浮动，要么全部不浮动。

清除浮动：

为什么要清除浮动？

浮动会使一些元素脱离文档流。

清楚浮动的方法:

1. 定高法：给浮动元素的父元素定一个高。
2. 额外标签法：给浮动元素的父元素后面加一个div
3. 超出隐藏法：给浮动元素的父元素一个超出隐藏。
4. 利用伪元素：给浮动元素的父元素一个伪元素。

伪元素：

微元素是一个行内元素。

微元素可以这样写：

clear：after{
   content:"0";
   display:block;
   clear:both
   height:0;
   vissbility:hidden;

转载于:https://juejin.im/post/5cd7b282f265da03937886d7