CSS（11）父级边框塌陷问题

2021/6/26 23:56:47

编程Tag： css div 父级 left block 11 display clear BOTH

本文主要是介绍CSS（11）父级边框塌陷问题，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

父级边框塌陷问题

clear

 clear : right;   右侧不允许有浮动元素
 clear : left;    左侧不允许有浮动元素
 clear : both;    两侧不允许有浮动元素
 clear : none;

解决方法：

1.增加父级元素的高度

 #box{
   width: 1500px;
   height: 500px;
   border: 2px solid red;
 }

2.增加一个空的div标签，清除浮动

 <div class="clear"></div>

 .clear{
   clear: both;
   margin: 0;
   padding: 0;
 }

3.在父级元素中添加一个overflow

 #box{
   border: 2px solid red;
   /*超出部分  overflow:   scroll滚动条   hidden隐藏*/
   overflow: hidden;
 }

4.父类添加一个伪类after（推荐）

 #box:after{
   content: '';
   display: block;
   clear: both;
 }

使用空div和伪类after就不要设宽高了

html：

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>index</title>
 
   <link rel="stylesheet" href="../浮动/style.css">
 
 </head>
 <body>
 
 <div id="box">
 
 <div>
   <img src="../浮动/resources/qqyzml.png" alt="">
 </div>
 
 <div>
   <img src="../浮动/resources/王一博.jpg" alt="" width="200" height="500">
 </div>
 
 <div>
   <img src="../浮动/resources/表情包.jpg" alt="">
 </div>
 
   <p>
     王一博（YiBo），1997年8月5日出生于中国河南省洛阳市。
   </p>
 
   <!--  <div class="clear"></div>  -->
 
 </div>
 
 </body>
 </html>

css：

 #box{
   border: 2px solid red;
   /*超出部分  overflow:   scroll滚动条   hidden隐藏*/
   /*overflow: hidden;*/
 }
 
 #box:after{
   content: '';
   display: block;
   clear: both;
 }
 
 div{
   border: 2px solid red;
 }
 
 div:nth-of-type(1){
   display: inline-block;
   float: left;
 }
 
 div:nth-of-type(2){
   display: inline-block;
   float: left;
   height: 500px;
 }
 
 div:nth-of-type(3){
   display: inline-block;
   float: left;
 }
 
 p{
   display: inline-block;
   border: 2px solid red;
   float: left;
   /*
     clear : right;   右侧不允许有浮动元素
     clear : left;    左侧不允许有浮动元素
     clear : both;    两侧不允许有浮动元素
     clear : none;
   */
   /*clear: none;*/
 
 }
 
 /*.clear{
   clear: both;
   margin: 0;
   padding: 0;
 }*/

这篇关于CSS（11）父级边框塌陷问题的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！