清除浮动
2020-07-22 本文已影响0人
web_jianshu
２.1 文档流
※块元素独占一行
※行内元素在一行上显示
※自上而下
２.2 浮动(float)
用法:float:left|right
特点：
浮动起来
不占位置（脱标）
如果多个盒子都使用了浮动，会在一行上显示。
给行内元素使用浮动，可将行内元素转换成行内块。
尽量用display转换行内块。
作用：
※文本绕图
※制作导航栏
※网页布局
２.3 清除浮动
※清除不是删除浮动
※清除浮动是清除浮动产生的不良影响。
注意:不给外边的父盒子设置高度时，里边的子盒子浮动时，会让页面页面布局产生混乱。
方法：clear:left|right|both
使用最多的是clear:both;
未清除浮动前
未清除浮动前
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
.header,
.main,
.footer {
width: 500px;
}
.header,
.footer {
height: 100px;
background: #000;
}
.main {
background: #eee;
margin: 10px 0;
/* 方案2: 在外边的父盒子上使用：overflow:hidden; */
/* overflow: hidden; */
}
.content {
width: 300px;
height: 300px;
background: orange;
float: left;
/* margin-top: -100px; */
}
.sidebar {
width: 190px;
height: 300px;
background: green;
float: right;
}
/* 方案3: 伪元素清除浮动(与额外标签法原理一致) */
.clearfix:after {
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}
/*兼容ie浏览器*/
.clearfix {
zoom: 1;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="main clearfix">
<div class="content"></div>
<div class="sidebar"></div>
<!-- 方案1: 额外标签法 在浮动元素后边加一个标签，清除浮动。 -->
<!-- <div style="clear:both;"></div> -->
</div>
<div class="footer"></div>
</body>
</html>
清除浮动后
清除浮动后
