文档流：文档流是文档中可显示对象在排列时所占用的位置。
浮动：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。
浮动产生的影响
浮动与元素超出包含框的时候，包含框不会自动伸高来闭合浮动元素，叫做高度塌陷。
如下所示：.main 和 .side 不会撑高父元素 .wrap 的高度
// css代码
<style>
.wrap { border: 2px solid gray ; width: 400px;}
.main { float: left;width: 200px;height: 100px; background-color: pink;}
.side { float: right;width: 150px;height: 100px;background-color: greenyellow;}
.footer { width: 300px; height: 100px; background-color: yellow; }
</style>
// html代码
<div class="wrap" id="float1">
<h2>浮动</h2>
<div class="main left">.main{float:left;}</div>
<div class="side right">.side{float:right;}</div>
</div>
<div class="footer">.footer</div>
如何清除浮动
- 使用
clear : left|right|both|none; - 闭合浮动元素，减少浮动带来的影响
使用clear属性:
1.在浮动元素的后面添加<div style="clear:both;"></div>
<style>
.wrap { border: 2px solid gray; width: 400px;}
.main { float: left; width: 200px; height: 100px;background-color: pink;}
.side { float: right;width: 150px; height: 100px; background-color: greenyellow;}
.footer { width: 300px;height: 100px; background-color: yellow;}
</style>
<body>
<div class="wrap" id="float1">
<h2>clear清除浮动</h2>
<div class="main left">.main{float:left;}</div>
<div class="side right">.side{float:right;}</div>
<div style="clear:both;"></div>
</div>
<div class="footer">.footer</div>
2.在浮动元素的后面添加<br clear="all">
将上一个例子中的<div style="clear:both;"></div>替换为<br clear="all">
父元素设置dispaly:table
在父元素的css中加入display:table，
.wrap{
border: 2px solid gray;
width: 400px;
height: 100px;
display: table;
}
父元素设置overflow: hidden;
在父元素的css中加入overflow: hidden
.wrap{
border: 2px solid gray;
width: 400px;
height: 100px;
overflow: hidden;
}
上面的例子中 .main 和 .side 中的一部分内容溢出被隐藏，修改的办法就是将
height: 100px;去掉，让元素自己撑开父元素，或者是把height的值设大一点，让元素不溢出就好了。
.wrap {
border: 2px solid gray;
width: 400px;
overflow: hidden;
}
还可以设置
overflow: auto;
添加:after伪元素
给父元素添加伪元素
.wrap:after{
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
网友评论