<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动的影响</title>
<style type="text/css">
/*
1、浮动元素不会影响前面的元素。
2、浮动起来的元素脱离了文档流，就不占原来的空间，所以后面的元素就会代替浮动起来的元素的位置
3、浮动元素脱离文档流以后会让父级检测不到自己。
解决浮动元素给父级带来的影响：清除浮动
1、手动给父级加高度
2、给父级添加 overflow：hidden 样式
3、给浮动元素添加同级元素，在新添加的元素里面添加 clear：both 样式。
新添加的元素不能浮动。
浮动元素没有完全脱离文档流
*/
.redDiv{
background-color: red;
height: 350px;
width: 200px;
}
.blueDiv{
background-color: blue;
height: 250px;
width: 300px;
float: left;
}
.greenDiv{
background-color: green;
height: 550px;
width: 400px;
/*float: left;*/
}
.bigDiv{
width: 400px;
background-color: purple;
border: 1px solid blue;
}
.midDiv{
height: 300px;
width: 300px;
background-color: darkgrey;
float: left;
}
</style>
</head>
<body>
<!--<div class="redDiv">div1</div>
<div class="blueDiv">div2</div>
<div class="greenDiv">div3</div>-->
<div class="bigDiv">
<div class="midDiv">
<div class="smallDiv">
</div>
</div>
</div>
</body>
</html>
网友评论