父级边框塌陷的解决方法

是九二呀

已于 2023-04-25 17:37:07 修改

阅读量242

点赞数

分类专栏：前端文章标签：前端 css html

于 2023-04-22 03:07:57 首次发布

本文链接：https://blog.csdn.net/Y9232/article/details/130299822

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

初始的代码：

<style>
			div {
				margin-top: 10px;
				padding: 5px;
			}
			#father {
				border: 1px solid #000;
			}
			.tu1,
			.tu2,
			.tu3 {
				border: 1px solid #faa;
				float: left;
			}
		</style>
	<body>
		<div id="father">
			<div class="tu1"><img src="./111.jpg" alt="" /></div>
			<div class="tu2"><img src="./222.jpg" alt="" /></div>
			<div class="tu3"><img src="./333.jpg" alt="" /></div>
		</div>
	</body>

1.浮动元素后面加空div

	<style>
			div {
				margin-top: 10px;
				padding: 5px;
			}
			#father {
				border: 1px solid #000;
			}
			.tu1,
			.tu2,
			.tu3 {
				border: 1px solid #faa;
				float: left;
			}
			.clear{
				clear: both;
				margin: 0;
                padding：0;
			}
	</style>
	<body>
		<div id="father">
			<div class="tu1"><img src="./111.jpg" alt="" /></div>
			<div class="tu2"><img src="./222.jpg" alt="" /></div>
			<div class="tu3"><img src="./333.jpg" alt="" /></div>
			<div class="clear"></div>
		</div>
	</body>

增加了一个空的div，由于受css继承特性的影响，前面代码所设置的所有的div都有一个10px的外边距和5px的内边距，这里空div的主要作用就是扩展外层父元素的高度，所以要将它的内外边距设为0。得到下图：

使用clear属性达到了想要的效果但增加了代码量。

2.设置父元素的高度

父元素的边框塌陷后会包不住里面的浮动元素，给父元素设置一个固定高度把边框撑开，从视觉上也可以看见里面的子元素。

#father {
				border: 1px solid #000;
				height: 400px;
			}

从下图上看，子元素排在一排，并且父级边框也能包裹住里面的子元素，没对其他元素造成影响，但父元素设置了400px的高度，实际内容高度并没有400px，造成了下面的空白，降低了元素的扩展性。

3.父级添加overflow属性

在css中使用overflow属性也可以清除浮动来扩展盒子的高度，这种方法只需要设置外层盒子的overflow属性值为hidden即可。

#father {
				border: 1px solid #000;
				overflow: hidden;
			}

overflow：hidden为溢出隐藏的意思，虽然能清除浮动防止边框塌陷，但是在鼠标移入弹出下拉框的场景中不能使用，否则会把下拉框隐藏。

4.父级添加伪类after

伪类after的意思是选择class类后面的元素，并添加样式。

<style>
			div {
				margin-top: 10px;
				padding: 5px;
			}
			#father {
				border: 1px solid #000;
			}
			.tu1,
			.tu2,
			.tu3 {
				border: 1px solid #faa;
				float: left;
			}
			.a:after{
				content: "";/* 在a类后面添加的内容为空 */
				display: block;/* 把添加的内容转化为块级 */
				clear: both;/* 清除这个元素两边的浮动 */
			}
		</style>
	</head>
	<body>
		<div id="father" class="a">
			<div class="tu1"><img src="./111.jpg" alt="" /></div>
			<div class="tu2"><img src="./222.jpg" alt="" /></div>
			<div class="tu3"><img src="./333.jpg" alt="" /></div>
		</div>
	</body>