css浮动(float)、高度塌陷问题

浮动的概念

块级元素在文档流无法在同一行显示多个元素，而将其转化为行内元素或者行内块元素后元素之间又会出现缝隙。为达到布局效果就要使用到浮动（float）。浮动框可以向左或者向右移动，直到它边缘碰到父盒子的边框或者另一个浮动的元素的边框为止。浮动会使元素脱离文档流（标准流），即在文档流中不再占有位置。

1. 如图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘。

2. 如图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以不占据空间，实际上盖住了框 2，使框 2 从视图中消失。

3. 如图，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其他浮动块向下移动，直到有足够的空间。如果浮动元素的高度不够，那么当他们向下移动时可能被其他元素“卡住”。

4. 元素浮动时，它上下移动直到上边缘碰到前面元素（浮动元素或标准流元素）的下边缘为止，或者与前一个浮动元素的上边缘对齐；左右移动直到碰到其他元素的边缘或者包含元素的边缘为止。如图所示。

浮动的特性

• 浮动元素会脱离文档流（脱标）。
• 浮动元素会在一行内显示并且顶部对齐。
• 浮动元素会具有行内元素的特性。
• 浮动元素只会影响后面的标准流不会影响前面的标准流。
• 任何显示模式的元素都可以设置浮动属性。
• 一个元素设置了浮动属性，理论上其余的兄弟元素也要浮动（防止影响兄弟元素出现布局问题）。

兄弟元素没有同时设置浮动常会出现的问题有:

1. 后面的元素被前面的浮动元素覆盖。
2. 后面的浮动元素由于前面的兄弟元素没有浮动而没法显示在同一行。

清除浮动

高度塌陷问题

由于父级元素在很多情况下不会直接给定高度（高度由内容撑开），里面的子元素脱离文档流后,不再占据空间。父元素内容的高度出现变化（塌陷），影响父元素下面文档流盒子的位置。

解决高度塌陷问题

解决高度塌陷问题即清除浮动的本质是清除浮动元素对父元素高度的影响。如果父元素盒子本身有高度，则不需要清除浮动。方法是给父元素里面的子元素添加 clear 属性。

selector {
    
    
    clear:left;
}
/*清除该元素左边浮动元素对父元素的高度的影响*/
/*可以设定的值还有right、both*/

通常解决高度塌陷问题采用的策略是闭合浮动，即将浮动产生的影响只局限于父元素内部。

1. 在浮动元素的下面添加一个空的块级标签并对其添加清除浮动样式

<div style="clear:both">
 </ div>
<!--但是添加了无意义的标签，结构性较差。-->

2. 给父级元素添加 overflow：hidden\auto\scroll 属性，代码简洁但会出现无法显示溢出部分的问题。
3. 给父级元素添加 after 伪元素。

.clearfix:after {
    
    
	content:"";
	display:block;
	clear:both;
	height:0;
	visibility:hidden;
}
.clearfix {
    
       /*ie6、ie7专用*/
*zoom:1;
}

4. 给父级元素添加双伪元素。

.clearfix:before,.clearfix:after {
    
    
	content:"";
	display:table;
}
.clearfix:after {
    
    
	clear:both;
}
.clearfix {
    
       /*ie6、ie7专用*/
*zoom:1;
}

注意：清除浮动解决的是父元素的高度塌陷对其下面元素的影响而不是解决里面的浮动元素对父元素里面的子元素（位于浮动元素后面的元素）的影响。平时应该注意这两种影响的区别。

扬尘 / 2020 / 12 / 20