margin合并和浮动

1.父子元素margin塌陷问题
子元素设置margin-top作用于父元素时, 会产生margin合并问题. 解决方法是: 给父元素的::before伪元素设置为display:table属性, 其中content属性为必需

<div id="father">
<div id="child"></div>
</div>

#father{width: 100px;height: 100px;background-color: red;}
#child{height: 50px;width: 50px;background-color: green;margin-top: 50px;}
#father:before{content: "";display: table;}

或者父级

(1)position:absolute/fixed

(2)display:inline-block;

(3)float:left/right

(4)overflow:hidden

 

2.清除浮动流
防止浮动元素对后续元素的影响, 应该在每一次使用浮动后都清除,所以可以在css文件中定义如下代码, 以后每使用一次浮动,都给该元素添加一个clear类名

    .clear:after{
        display: block;
        content: "";
        clear: both;
    }

 

 

3、img标签的垂直居中问题：

img标签在div中垂直居中靠上问题：网上的方法有很多，但是大多有副作用，比如将外部div设为table-cell，那么这个div就是一个table的单元格了，margin就对他失效了，目前，找到的比较适合的方法是：

<div class="detail_title">
<img src="./index/img/灯泡_bulb3.svg" alt="">
<label>如何使用mideo</label>
</div>
.detail_title{height:4rem;line-height:4rem;vertical-align:middle;padding:0 1rem;}
.detail_title img{width:2rem;height:2rem;vertical-align:middle;}
.detail_title label{font-size:1.8rem;vertical-align:middle;}