码迷,mamicode.com
首页 > Web开发 > 详细

CSS(11)父级边框塌陷问题

时间:2021-06-28 19:13:22      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:ber   contain   add   and   padding   --   pair   utf-8   nta   

父级边框塌陷问题

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)父级边框塌陷问题

标签:ber   contain   add   and   padding   --   pair   utf-8   nta   

原文地址:https://www.cnblogs.com/qqyzml/p/14939488.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有
迷上了代码!