浮动和清除

float浮动元素：

• left - 元素浮动到其容器的左侧
• right - 元素浮动在其容器的右侧
• none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
• inherit - 元素继承其父级的 float 值

　　会在本身定位的位置基础上进行浮动。

清除浮动clear：　

• none - 允许两侧都有浮动元素。默认值
• left - 左侧不允许浮动元素
• right- 右侧不允许浮动元素
• both - 左侧或右侧均不允许浮动元素
• inherit - 元素继承其父级的 clear 值

如果某个元素浮动到左侧，则应清除左侧。您的浮动元素会继续浮动，但是被清除的元素将显示在其下方。

不适用浮动，文本会在右侧； 使用浮动后，文本会在下面。

 

 

如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外：

然后我们可以向包含元素添加 overflow: auto;

 

 虽然overflow:auto;可以实现，但是新的现代 clearfix hack 技术使用起来更安全

.clearfix::after {
  　　content: "";
  　　clear: both;
  　　display: table;
     }