【问题】父套子时，‘阻止子元素的外边距传递给父元素’与闭合浮动

  • 使用空的<table>标签可以隔离父子元素的外边距，阻止外边距的重叠（直接添加会产生 无用标签，要在CSS中添加属性）
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             .box1{
 8                 height: 300px;
 9                 width: 200px;
10                 background-color: coral;
11             }
12             .box2{
13                 height: 200px;
14                 width: 200px;
15                 background-color: greenyellow;
16                 margin-top: 30px;
17             }
18             .box1:before{
19                 content: "";
20                 display: table;
21             }
22         </style>
23     </head>
24     <body>
25         <div class="box1">
26             <div class="box2">
27                 
28             </div>
29         </div>
30         
31     </body>
32 </html>
  •  解决父元素高度塌陷，进行清除float

 

方法一：在需要清除浮动的地方加个div.chear或者br.clear【不推荐】因为一旦加入元素就会改变html的结构。

.clear{
              clear: both;
              height: 0;
              overflow: hidden;
           }

方法二：在浮动的父元素上添加class=“  （box3) clearfix”

.clearfix:after{
                content: "";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden;
            }
.clearfix{
           *+height: 1%;
         }

        此方法也有弊端，改变CSS中的写法即可

.demo:after,.demo2:after{
                content: "";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden;
            }
            .demo,.demo2{
                *+height: 1%;
            }

方法三:

.clearfix:after{
                overflow: hidden;
                zoom: 1;
            }

方法四：

.clearfix:after{
                overflow: auto;
                zoom: 1;
            }

参考来源：

http://www.daqianduan.com/3606.html

http://www.iyunlu.com/view/css-xhtml/55.html

 

posted @ 2019-03-24 15:03  WX1211  阅读(295)  评论(0)  编辑  收藏  举报