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

时间：2022-04-11 14:44

父级边框塌陷问题

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;
 }*/