<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>清除浮动、自适应高度的div</title>
</head>
<style type="text/css">
.father{
background:#000080;
border:1px solid red;
}
.div2{
background:#800080;
border:1px solid red;
height:100px;
margin-top:10px;
text-align: center;
}
.left{
float:left;
width:40%;
background:#DDD
} /*高度可设置可不设置，给子元素设置可以撑开 height:80px;*/
.right{
float:right;
width:50%;
background:#DDD;
} /*高度可设置可不设置，给子元素设置可以撑开 height:80px;*/
/*清除浮动代码*/
.clearfloat:after{
display:block;
clear:both;
content:"";
visibility:hidden;
height:0;
}
.clearfloat{zoom:1}
</style>
<div class="father clearfloat">
<div class="left">
<p>我来撑开高度</p>
<p>我来撑开高度</p>
<p>我来撑开高度</p>
<p>我来撑开高度</p>
</div>
<div class="right">
<p>我来撑开高度</p>
<p>我来撑开高度</p>
<p>我来撑开高度</p>
</div>
</div>
<div class="div2">
<h3>与上一个同级div</h3>
</div>
</body>
</html>清除浮动、div随子元素高度增加而改变
猜你喜欢
转载自blog.csdn.net/a772116804/article/details/80324688
今日推荐
周排行