5、浮动属性
2019-02-24 本文已影响0人
calvinbj
正常div块级元素的排列是每个块级元素占一行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box1{width: 100px;height: 100px;background-color: #f00;}
.box2{width: 200px;height: 200px;background-color: #0f0;}
.box3{width: 250px;height: 250px;background: #00f;}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
</body>
</html>
三个块级元素设置为浮动属性：float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box1{width: 100px;height: 100px;background-color: #f00;float: left;}
.box2{width: 300px;height: 300px;background-color: #0f0;float: left;}
.box3{width: 500px;height: 500px;background: #00f;float: left;}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{width: 960px;border: 5px #000 solid;}
.box_l{width: 480px;height: 240px;background-color: #f00;float: left;}
.box_c,.box_r{width: 240px;height: 240px;float: left;}
.box_c{background: #f1f1f1;}
.box_r{background: #fbfbfb url(images/1.jpg) no-repeat right bottom;}
</style>
</head>
<body>
<div class="box">
<div class="box_l"></div>
<div class="box_c"></div>
<div class="box_r"></div>
</div>
</body>
</html>
上面这种情况痴线了高度塌陷。
第一种方法：给父元素添加声明overflow:hidden;
<style type="text/css">
.box{width: 960px;border: 5px #000 solid;overflow: hidden;}
.box_l{width: 480px;height: 240px;background-color: #f00;float: left;}
.box_c,.box_r{width: 240px;height: 240px;float: left;}
.box_c{background: #f1f1f1;}
.box_r{background: #fbfbfb url(images/1.jpg) no-repeat right bottom;}
</style>
第二种方法：在浮动的元素下方添加空div，并给该元素添加声明：clear:both;height:0;overflow:hidden(或font-size:0;)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{width: 960px;border: 5px #000 solid;}
.box_l{width: 480px;height: 240px;background-color: #f00;float: left;}
.box_c,.box_r{width: 240px;height: 240px;float: left;}
.box_c{background: #f1f1f1;}
.box_r{background: #fbfbfb url(images/1.jpg) no-repeat right bottom;}
.clean{clear: both;height: 0;font-size: 0;}
</style>
</head>
<body>
<div class="box">
<div class="box_l"></div>
<div class="box_c"></div>
<div class="box_r"></div>
<div class="clean"></div>
</div>
</body>
</html>
上面两种方法最终解决“高度塌陷”后的效果图如下：
