【web】【css】-浮动，清除浮动

浮动

作用：让块属性元素排成一行，解决水平布局问题

附带作用：

1. 让行属性元素支持设置宽高
2. 让文字环绕

float: left;左浮动

已左边为开始位置

float：right右浮动

以右边为开始位置

为什么不用display：inline-block？

1. 代码换行默认有空隙
2. 一个移动，其他会跟着动
3. 默认文本下对齐

inline-block用途：让行属性元素支持设置宽高

行属性在什么情况下可设置宽高？

display：inline-block

float：left/right

存在的问题

​ 父元素在不设置高度的情况下，高度由子元素撑开，一旦子元素设置浮动，父元素会失去高度进而影响后面元素布局

解决办法(清除浮动)

1. 给父元素设置overflow：hidden
2. 动态向父元素后面添加一个clear：both的块属性元素

 .box::after{
            content: "";
            clear: both;
            display: block;

BFC

• 名为 “块级格式化上下文”，简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。
• 作用：解决高度塌陷问题，清除浮动