HTML中浮动元素的特点

Posted 2022-03-21 simple-Xiao

html初始网页布局常见有：标准流、浮动、定位。

  标准流：简单来说就是普通流、常规流，占位；

  浮动：就是从标准流中浮动出来；不占位；

  定位：也是从标准流脱离出来；不占位；

如果给个层级的话：标准流 > 浮动 > 定位。

今天主要记一下浮动元素的特点：

代码：float:left;或者：float:right;

只有左浮动和右浮动。

特点：

1. 脱标（脱离标准流），不占位置；

2. 元素浮动，后面标准流会上来把没浮动元素之前的位置占了，浮动元素会压住后面上来的标准流，不会对前面的标准流造成影响，如果不清除浮动的话，常常出现高度塌陷现象；

3. 浮动元素不会压住父元素的边框、内容和图片，只会围绕着浮动元素；

4. 浮动的元素顶对齐；

5. 浮动的元素设置宽高生效，具有行内块的特点；

6.  不能用text-align: center;因为脱标了所以盒子不能居中；