HTML盒子模型的边框塌陷问题

2022/3/9 23:17:28

编程Tag： html 高度设置边框 hidden background 盒子 100px 塌陷

本文主要是介绍HTML盒子模型的边框塌陷问题，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

有些在html布局中，为了更加灵活，会使用没有设置高度的盒子，让子盒子来控制父盒子的高度，在灵活方便的同时也会有可能出现父盒子边框塌陷问题。

 1 <title>盒子模型</title>
 2         <style>
 3             #man{
 4                 width: 300px;
 5                 
 6                 background-color: red;  //红色
 7             }
 8             #min{
 9                 width: 100px;
10                 height: 100px;
11                 background-color: aqua;  //浅绿色
12                 float: left;
               }

14             #end{
15                 width: 200px;
16                 height: 100px;
17                 background-color: burlywood; //实木色
18             }
19         </style>
20     </head>
21     <body>
22         <div id="man">
23             <div id="min"></div>
24         </div>
25         <div id="end"></div>
26     </body>

由于父盒子没有设置高度，父盒子自适应子盒子高度，且子盒子设置了浮动，子盒子退出文档流，原本的位置不再占据，自适应高度的父盒子高度变为0，父盒子后面的盒子会占据原本父盒子的位置。

所以父盒子红色不显示。

解决父盒子边框塌陷问题：

1.设置父盒子高度（不推荐使用，会失去灵活性）。

2.在父盒子里设置一个空白的div，设置空白div的css样式clear: both（不推荐使用）。

3.给父盒子添加属性 overflow: hidden; 也不推荐使用，因为overflow: hidden；还有一个主要作用，超出父盒子的内容会被隐藏。

4.使用伪类（推荐）。

.pseudo:after{
	visibility:hidden;
    	clear:both;
    	display:block;
  	content:".";
    	height:0
	clear: both;
	}

<div id="man" class="pseudo">

这篇关于HTML盒子模型的边框塌陷问题的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

HTML盒子模型的边框塌陷问题

相关编程文章