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

 

上一篇:go logrus实战应用


下一篇:通过HTTP请求响应过程了解HTTP协议