html中解决父级边框塌陷的方法,css元素塌陷的解决方法

实例一 给父级元素添加clear：both

html>

元素塌陷

*{

margin: 0;

padding: 0;

}

#about{

height: 100px;

width: 100px;

background-color: orange;

float: left;

}

.above:after{

content: '';

display: block;

clear: both;

}

.above{

border: 1px solid red;

}

123

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例 二 给父级元素添加overflow：hidden

html>

元素塌陷

*{

margin: 0;

padding: 0;

}

#about{

height: 100px;

width: 100px;

background-color: orange;

float: left;

}

/*.above:after{

content: '';

display: block;

clear: both;

}*/

.above{

border: 1px solid red;

overflow: hidden;

}

123

运行实例 »

点击 "运行实例" 按钮查看在线实例