CSS 浮动（float）

浮动

语法：float：left  |  right  |  none

float 属性介绍

① left ：元素向左浮动。

② right ：元素向右浮动。

③ none ：默认值。

④ inherit ：从父元素继承float属性。

浮动问题:

脱离文档流；导致父级的高度撑不开（父级高度塌陷）

文档流：将窗体自上而下分成一行一行,并在每行中按从左至右的挨次排放元素,即为文档流。
文档流：元素在页面中的位置取决于它在HTML当中的位置

浮动：  让元素脱离文档流，按照指定的方向进行移动，当碰到同级的浮动元素或者父级的边界的时候才会停下来

清浮动

    清除浮动造成的影响（父级高度塌陷）

margin传递：
给父级加边框，padding
给父级加浮动

解决浮动元素不能撑开父级的高度问题： 可以给父级加高度；

（1）after伪类
:after{}它是往一个元素的后面追加一个虚拟的元素
父级添加
.box:after{
content: ‘’;
display: block;
clear: both;
}

Clear：可以认为设置了clear属性的元素，不能被浮动的元素覆盖
Left：不允许左边有浮动元素
Right：不允许右边有浮动元素
Both：两边都不允许

（2）Overflow的用法：

Overflow：visible 默认值超出部分可见

Overflow：hidden 将超出部分隐藏

Overflow：scroll 添加滚动条

Overflow：auto 自动设置滚动条

（3）给父级加高度