惠玩科技

一段代码完美解决div高度塌陷问题和父子元素外边距重叠问题 – 惠玩科技

一段代码完美解决div高度塌陷问题和父子元素外边距重叠问题

张大鹏 2018-06-07

源代码

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<title>clearfix</title>

<style type=”text/css”>

.box1{

width: 300px;

height: 300px;

background-color: #bbffaa;

}

.box2{

width: 200px;

height: 200px;

background-color: yellow;

margin-top: 100px;

}

.box3{

border: 10px red solid;

}

.box4{

width: 100px;

height: 100px;

background-color: yellowgreen;

float: left;

}

/*一段代码同时解决高度塌陷问题和父子元素外边距重叠问题*/

.clearfix:before,

.clearfix:after{

content: “”;

display: table;

clear: both;

}

.clearfix{

zoom: 1;

}

</style>

</head>

<body>

<div class=”box3 clearfix”>

<div class=”box4″></div>

</div>

<div class=”box1 clearfix”>

<div class=”box2″></div>

</div>

</body>

</html>

张大鹏

北京理想国惠玩科技有限公司CEO

发表评论取消回复