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）给父级加高度