9.9

Posted 2022-11-04 smallnoob

浮动属性float

浮动就是让一个元素往左或右边“尽量挤靠”，以使其周边文字（行内元素）可以围绕该浮动元素显示。

其典型的表现就是一张图片向左对齐（align=”left”）的时候，图片标签前后的文字都能够绕着图片展示。

浮动属性float的值包括：

left（向左浮动）， right（向右浮动）， none（不浮动）。

语法：

float：left；或float：right；

浮动的特性：

 

1，对行内元素来说：浮动元素会先于同一行中的行内元素而占据其所设定方向的水平空间；

 

2，对块状元素来说：浮动元素相当于“浮起来了”，块状元素会被浮动元素“遮挡”；

 

3，多个浮动元素会依次往设定的方向“挤靠”，直到放不下，再往“下一行”，继续“挤靠”；

 

4，浮动元素往下一行挤靠时，如碰到“突出物”，则会被“卡住”，但仍然按挤靠规则进行显示；

 

5，浮动盒子失去“垂直支撑力”，表现为不占它外层盒子高度，但仍然有宽度；

 

浮动的清除：

 

当一个盒子内部出现浮动元素，则该盒子不会被该浮动元素“撑高”，也就是说，父盒子失去了理应包住子盒子的高度。

 

（当然，如果父盒子中有其他非浮动元素撑着，也就具有该其他非浮动元素所应该撑出的高度）

 

 

 

这通常都不符合正常的文档布局的需要——正常的需要就是外层盒子需要包住内层盒子。

 

怎么办？

 

——清除浮动。

 

使用属性clear，有常见的3个值：

 

clear: left:表示该元素左边不要出现浮动元素；

 

clear: right：表示该元素右边不要出现浮动元素；

 

clear:both：表示该元素两边都不要出现浮动元素；——这是最常见的需求（场景）。

 

 

 

所谓清除浮动，其实就是让父盒子中的浮动特性“终止”（结束）。这样父盒子就具有了正常的高度，可以正常包住其内部的浮动盒子。