css: 浮动特性(高度塌陷)(BFC: overflow)

浮动

1. 浮动特性

1. float属性会把行内元素改变为块级元素

span {
	width: 300px;
	height:100px;
}

width 和 height 会失效, 因为 span 是行内元素, 当我们添加 float属性的时候, width 和 height 就会生效了

2. float会让该元素脱离正常文档流

2. float 产生的问题:

2.1 float 产生的父级容器高度塌陷

什么是父容器高度塌陷?
当父容器检测不到里面有任何子容器在文本流当中的时候, 当我们没有给他规定高度的时候, 他的高度就为 0

为什么父容器会检测不到子容器
因为当我们给子容器设置 overflow 的时候, 子元素会脱离文档流, 因此父容器就检测不到了

如图:

	<style>
			div.father {
				border: 2px solid red;
			}

			div#son-1 {
				background-color: green;
				width: 100px;
				height: 100px;
				float: left;
			}
			div#son-2 {
				width: 100px;
				height: 100px;
				background-color: blue;
				float: right;
			}
	</style>
<div class="father">
		<div id="son-1"></div>
		<div id="son-2"></div>
</div>

如图所示, 红色边框的父亲 div 已经高度塌陷了, 因为我们没有规定父div 高度,所以 当两个子 div 都是 float 的时候, 高度塌陷了

方案一: 隐藏 div 采用清除浮动

我们可以让在 父级容器添加一个 子div, 而改子 div 采用清除浮动方法, 可以避免父级容器塌陷.

clear:left /right/ both : 由于 float 会让 元素脱离 css 的文档流, 所以后面的 元素 会补位上去. 如果我们不想让后面的元素因为 前一个元素的 float 影响, clear 就会这样. 所以当我们的隐藏元素采用了 clear 之后, 该隐藏元素不会被顶上去,所以父级元素可以感知到改隐藏元素, 所以父级容器不会高度塌陷

	<style>
			div.father {
				border: 2px solid red;
			}

			div#son-1 {
				background-color: green;
				width: 100px;
				height: 100px;
				float: left;
			}
			div#son-2 {
				width: 100px;
				height: 100px;
				background-color: blue;
				float: right;
			}
			div#hidden {
				clear: both;
			}
	</style>
	<div class="father">
			<div id="son-1"></div>
			<div id="son-2"></div>
			<div id="hidden"></div>
	</div>

此时父亲的 div 高度被撑起来了, 虽然父 div 没有检测到两个子 div, 但是检测到了隐藏的 div, 所以隐藏的 div 依然能让 父 div 高度撑起来

更骚气的是在 son-2(最后一个 div) 加一个 :: before 伪类, 然后给伪类设置 clear:both 这样不用填添加额外的 div)

方法二 : 触发 BFC

overflow:hidden / overflow:auto / overflow:scroll等 overflow 会触发CSS 的 BFC 特性, 从而会记录子元素(已经被浮动的元素)的宽高和位置, 从而被撑开, 解决父级元素因为子元素浮动而高度塌陷问题, 具体是什么 overflow 可以视情况而定

<style>
			div.father {
				border: 2px solid red;
				overflow: hidden;
			}

			div#son-1 {
				background-color: green;
				width: 100px;
				height: 100px;
				float: left;
			}
			div#son-2 {
				width: 100px;
				height: 100px;
				background-color: blue;
				float: right;
			}
</style>
<div class="father">
			<div id="son-1"></div>
			<div id="son-2"></div>
</div>