前端基础css浮动样式（五）

浮动(float)

左浮动

float: left;

右浮动

float: right;

特性：

浮动会导致脱离标准文档流会使所浮动的盒子不在存在于原来的盒子之中

浮动不会脱离文本流

规范：

同级之间如果使用了float属性，其余的也要添加float属性

影响：

(1)破坏了布局 导致布局错乱

(2)浮动会导致父级盒子塌陷

解决方法：

1父级盒子增加高度属性    特性（不能自动撑开，高是固定的，不够灵活）

2父级盒子加over flow ：hidden    特性（自动撑开，但是会导致移除的部分无法显示）

3增加一个无内容的空盒子 clear:both;   特性（空盒子必须无意义无宽高负责会失效）

4父盒子增加伪元素 ::after{content: ""; display:block; clear:both}   特性（达到无意义的空盒子的效果且不会收到属性的影响 通常使用clerfix::after 或者是clear来规范清除浮动）