float和clear

The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it. 从正常布局流中移除

clear

clear属性指定哪一边的元素不允许浮动

清除浮动的技巧：

overflow: auto

如果子元素高于父元素，然后它又是处于浮动状态，它会溢出它的容器。我们添加overflow: auto，就能修复这个问题：

.clearfix {
    overflow: auto;
}

:after content

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

.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

float和position

An absolutely positioned element cannot float. A floating element cannot be absolutely positioned. 一个绝对定位的元素不能浮动，一个浮动的元素不能设置为绝对定位。

Relationships between 'display', 'position', and 'float'

有三个可以影响box generation和布局：display、position、float，它们互相交互：

如果display值为none，那么position和float不起作用，在这种情况下，元素并不会产生一个box
否则，如果position有absolute或fixed值，那么这个盒子就是绝对定位，计算出来的float值是none，display将会设置为table流。盒子的位置将会由top、right、bottom、left和四个属性来决定
否则，如果float属性的值不是none，那么元素就浮动，然后display值被设置为table流

float CSS Layout - float and clear All Abount Floats How float and position work together? Visual formatting model

float 和 clear