浮动定义
一个浮动盒会向左或向右移动，直到其外边（outer edge）挨到包含块边沿或者另一个浮动盒的外边。如果存在行盒，浮动盒的外top（边）会与当前行盒的top（边）对齐 如果没有足够的水平空间来浮动，它会向下移动，直到空间合适或者不会再出现其它浮动了
例子：
- 正常情况
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.ct{
width: 300px;
border: 3px solid green;
margin: 100px;
}
.box{
width: 100px;
height: 100px;
background: red;
}
.box2{
background: blue;
}
.box3{
background: pink;
}
</style>
</head>
<body>
<div class="ct">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
</body>
</html>
2.红色右浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.ct{
width: 300px;
border: 3px solid green;
margin: 100px;
}
.box{
width: 100px;
height: 100px;
background: red;
}
.box1{
float: right;
}
.box2{
background: blue;
}
.box3{
background: pink;
}
</style>
</head>
<body>
<div class="ct">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
</body>
</html>
- 红色左浮动，覆盖蓝色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.ct{
width: 300px;
border: 1px solid green;
margin: 100px;
}
.box{
width: 100px;
height: 100px;
background: red;
}
.box1{
float: left;
}
.box2{
background: blue;
}
.box3{
background: pink;
}
</style>
</head>
<body>
<div class="ct">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
</body>
</html>
- 都向左浮动，父元素宽度为0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.ct{
width: 300px;
border: 3px solid green;
margin: 100px;
}
.box{
width: 100px;
height: 100px;
background: red;
float: left;
}
.box2{
background: blue;
}
.box3{
background: pink;
}
</style>
</head>
<body>
<div class="ct">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
</body>
</html>
- 如果包含块儿太窄无法容纳水平排列的三个浮动元素,那么其它浮动块儿向下移动,直到有足够的空间,如果浮动元素的高度不同,那么向下移动的时候可能被卡住
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.ct{
width: 280px;
border: 3px solid green;
margin: 100px;
}
.box{
width: 100px;
height: 100px;
background: red;
float: left;
}
.box2{
background: blue;
}
.box3{
background: pink;
}
</style>
</head>
<body>
<div class="ct">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
</body>
</html>
- 卡住了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.ct{
width: 280px;
border: 3px solid green;
margin: 100px;
}
.box{
width: 100px;
height: 100px;
background: red;
float: left;
}
.box2{
height: 80px;
background: blue;
}
.box3{
background: pink;
}
</style>
</head>
<body>
<div class="ct">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
</body>
</html>
- 因为浮动（盒）不在普通流内，在浮动盒之前或者之后创建的未定位的（non-positioned）块盒会竖直排列，就像浮动不存在一样。然而，接着（next to）浮动（盒）创建的当前及后续行盒会进行必要的缩短，为了给浮动（盒）的margin box让出空间（简而言之就是普通元素看不见浮动元素，但普通元素中的行盒元素可以看见浮动元素并会围绕浮动元素排列）
例1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.ct{
width: 300px;
border: 3px solid green;
margin: 100px;
}
.box{
width: 100px;
height: 100px;
background: red;
float: left;
}
.box2{
height: 100px;
background: blue;
}
.box3{
background: pink;
}
p{
background: gray;
margin: 0;
}
</style>
</head>
<body>
<div class="ct">
<div class="box box1">1</div>
<p>因为浮动（盒）不在普通流内，在浮动盒之前或者之后创建的未定位的（non-positioned）块盒会竖直排列，就像浮动不存在一样。然而，接着（next to）浮动（盒）创建的当前及后续行盒会进行必要的缩短，为了给浮动（盒）的margin box让出空间</p>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
</body>
</html>
例2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.ct{
width: 300px;
border: 3px solid green;
margin: 100px;
}
.box1{
height: 100px;
width: 100px;
background: blue;
float: left;
opacity: 0.5;
}
.box2{
width: 120px;
height: 120px;
background: pink;
}
</style>
</head>
<body>
<div class="ct">
<div class="box box1">1</div>
<div class="box box2">2块盒看不见浮动的box1，但文本看得见</div>
</div>
</body>
</html>
由此可见，浮动元素的背景颜色覆盖非浮动元素的背景颜色。
8.设置浮动后块级元素和行内元素都拥有inline-block的特性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
div{
float: left;
background: red;
}
span{
float: left;
background: blue;
width: 150px;
height: 50px;
margin: 10px;
}
</style>
</head>
<body>
<div>这是块级元素</div>
<span>这是行内元素</span>
</body>
</html>
- 负边距
两个浮动元素，如果因放不下导致其中一个下移，对下移的元素设置负 margin 值大于自身的宽度可将其上移
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
</div>
<style>
.container{
width: 400px;
height: 400px;
border: 2px solid green;
}
.box1{
width: 300px;;
height: 100px;
background: pink;
float: left;
}
.box2{
width: 110px;
height: 100px;
border: 1px solid red;
float: left;
}
</style>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
</div>
<style>
.container{
width: 400px;
height: 400px;
border: 1px solid green;
}
.box1{
width: 300px;;
height: 100px;
background: pink;
float: left;
}
.box2{
width: 110px;
height: 100px;
background: red;
float: left;
margin-left: -10px;
}
</style>
</body>
</html>
浮动使用场景
- 两栏布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.aside{
width: 150px;
height: 400px;
background: red;
float: left;
}
.main{
margin-left: 160px;
background: blue;
height: 400px;
}
</style>
</head>
<body>
<div class="aside">侧边栏固定宽度</div>
<div class="main">内容区块自适应宽度</div>
</body>
</html>
- 三栏布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.aside{
width: 150px;
height: 400px;
background: red;
float: left;
}
.menu{
width: 150px;
height: 400px;
background: yellow;
float: right;
}
.main{
margin-left: 160px;
margin-right: 160px;
background: blue;
height: 400px;
}
</style>
</head>
<body>
<div class="aside">左侧边栏固定宽度</div>
<div class="menu">右侧边栏固定宽度</div>
<div class="main">内容区块自适应宽度</div>
</body>
</html>
这里需要注意的是aside、main、menu放置的顺序，因为浮动元素是可以看见块级元素的，而块级元素占据一整行，所以浮动元素会换行，入下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.aside{
width: 150px;
height: 200px;
background: red;
float: left;
}
.menu{
width: 150px;
height: 200px;
background: yellow;
float: right;
}
.main{
margin-left: 160px;
margin-right: 160px;
background: blue;
height: 200px;
}
</style>
</head>
<body>
<div class="aside">左侧边栏固定宽度</div>
<div class="main">内容区块自适应宽度</div>
<div class="menu">右侧边栏固定宽度</div>
</body>
</html>
- 左浮导航条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.navbar{
list-style: none;
}
.navbar>li{
float: left;
margin-left: 15px
}
</style>
</head>
<body>
<ul class="navbar">
<li><a href="#">产品1</a></li>
<li><a href="#">产品2</a></li>
<li><a href="#">产品3</a></li>
<li><a href="#">产品4</a></li>
</ul>
</body>
</html>
- 右浮导航栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.navbar{
list-style: none;
}
.navbar>li{
float: left;
margin-left: 15px
}
.box{
float: right;
}
</style>
</head>
<body>
<div class="box">
<ul class="navbar">
<li><a href="#">产品1</a></li>
<li><a href="#">产品2</a></li>
<li><a href="#">产品3</a></li>
<li><a href="#">产品4</a></li>
</ul>
</div>
</body>
</html>
浮动的副作用
问题1:对后续元素位置产生影响
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.aside{
width: 180px;
height: 400px;
background: red;
float: left;
}
.menu{
width: 180px;
height: 400px;
background: yellow;
float: right;
}
.main{
margin-left: 190px;
margin-right: 190px;
background: blue;
height: 300px;
}
#footer{
background: gray;
}
.content{
background: pink;
}
</style>
</head>
<body>
<div class="content">
<div class="aside">左侧边栏固定宽度</div>
<div class="menu">右侧边栏固定宽度</div>
<div class="main">内容区块自适应宽度</div>
</div>
<div id="footer">我是footer，但是我的样式出现了问题</div>
</body>
</html
问题2:父容器高度计算出现问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.navbar{
list-style: none;
background:pink;
border: 2px solid;
}
.navbar>li{
float: left;
margin-left: 15px
}
</style>
</head>
<body>
<ul class="navbar">
<li><a href="#">产品1</a></li>
<li><a href="#">产品2</a></li>
<li><a href="#">产品3</a></li>
<li><a href="#">产品4</a></li>
</ul>
</body>
</html>
父容器高度产生了塌陷
清理浮动
clear
- clear: left;
要求该盒的top border边位于源文档中在此之前的元素形成的所有左浮动盒的bottom外边下方 - clear: right;
要求该盒的top border边位于源文档中在此之前的元素形成的所有右浮动盒的bottom外边下方 - clear: both;
省略。。。
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
<style>
.box{
width: 100px;
height: 50px;
border: 1px solid;
float: left;
}
.box2{
clear: left;
}
</style>
</body>
</html>
用clear撑开父容器
例1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<ul class="navbar">
<li><a href="#">1首页</a></li>
<li><a href="#">2产品</a></li>
<li><a href="#">3服务</a></li>
<li><a href="#">4关于</a></li>
</ul>
<style>
.navbar{
list-style: none;
border: 1px solid #ccc;
}
.navbar:after{
content:'';
display: block;
clear: both;
}
.navbar>li{
float: left;
margin-left: 15px;
}
</style>
</body>
</html>
例2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="content">
<div class="menu">侧边栏固定宽度</div>
<div class="aside">侧边栏固定宽度</div>
<div class="main">内容区块自适应宽度</div>
</div>
<div id="footer">我是 footer，但我的样式好了</div>
<style>
.aside{
width: 150px;
height: 300px;
background: red;
float: right;
}
.menu{
width: 150px;
height: 300px;
background: red;
float: left;
}
.main{
margin-right: 160px;
margin-left: 160px;
background: blue;
height: 200px;
}
#content:after{
content:'';
display:block;
clear: both;
}
#footer{
background: grey;
}
</style>
</body>
</html>
例4:
屏幕快照 2018-12-05 下午2.23.13.png
当一个元素浮动时，在没有清除浮动的情况下，它无法撑开其父元素，但它可以让自己的浮动子元素撑开它自身，并且在没有定义具体宽度情况下，使自身的宽度从100%变为自适应（浮动元素display:block）。其高度和宽度均为浮动元素高度和非浮动元素高度之间的最大值。
清除浮动方法
- 利用 clear属性，清除浮动
- 使父容器形成BFC
谨记：
- 如果用了浮动，其父元素一般(最好)需要清除浮动
.clearfix::after {
content: ' ';
clear: both;
display: block;
}
- 水平布局时可以用inline-block或者浮动。用inline-block时要注意缝隙和对齐（vertical-align）；用浮动时要注意父容器塌陷，要把它撑开。
