浮动与清除浮动

1.浮动属性

float属性

浮动的框可以向右或向左移动,知道它的外边缘碰到包含框或另一个浮动框为止

浮动属性的特点:

1.浮动会脱离文档，向父容器的左边或右边移动直到碰到包含容器的边或者碰到其他浮动元素。

2.文本和行内元素将环绕浮动元素。

3.浮动会导致父元素高度坍塌

目的:为了达到自己的布局目的，让指定元素定位在指定位置，并且可以设置浮动后的行级元素的宽高

2.清除浮动

clear属性

clear属性规定元素的哪一侧不允许有其他浮动元素。

left:元素左侧不允许有浮动元素

right:元素右侧不允许有浮动元素

both:元素左右两侧均不允许有浮动元素

none:默认值，允许浮动元素出现在两侧

具体原理：在元素上外边距之上增加清除空间，比如清除左浮动会让元素的上外边距刚好在左边浮动元素的下外边距之下。