一、浮动
传统的网页布局一般包含三种方式，标准流（普通流），浮动和定位。一个完整的页面中这三种布局方式都有。标准流就是默认的元素排列方式，之前所学习的标签都是按照标准流来布局的。
为什么我们需要浮动呢，因为有时候元素默认的布局方式并不能满足我们的要求。比如实现多个div元素的一行显示，我们当然可以将他们转化为行内块元素，但是发现他们之间会存在一个小的空隙。又比如要实现两个div元素，分别贴着浏览器的左右显示，用标准流的方式就比较难实现。所以浮动就是为了解决标准流难以满足的情况而出现的。
浮动的语法
选择器 {float : 属性值}
div {float : left/right/none}
上述代码分别让元素向左、右以及不浮动。浮动的元素包含以下几个特点
1.浮动的元素会脱离标准流浮动到指定的位置，俗称脱标。
2.浮动的元素会在一行内显示并且顶部对齐，只有在宽度超出父元素的宽度的时候才会换行显示
3.浮动的元素会具有行内块元素的特点，即可以设置宽高并且一行内显示多个。
有了浮动我们就可以实现上述我们的需求了，要实现一行内显示多个div元素，只需要在CSS中书写
div {
height: 200px;
width: 200px;
background-color: pink;
float: left;
}
最后一行就是浮动的代码，如果要实现左右分别对齐，只需要一个向左一个向右浮动即可。如果要间隔显示，通过设置外边距即可。
一般来说，浮动元素都是搭配标准流的父元素来使用的，比如这样
有了浮动，就可以实现一些简单的网页布局比如下面这个布局模式
其代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.top {
height: 50px;
background-color: gray;
}
.banner {
width: 980px;
height: 80px;
background-color: gray;
margin: 10px auto;
}
.box {
width: 980px;
height: 300px;
background-color: pink;
margin: 0 auto;
}
.box li {
width: 237px;
height: 300px;
background-color: skyblue;
float: left;
margin-right: 10px;
}
.box .last {
margin-right: 0;
}
.footer {
height: 150px;
background-color: gray;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="last">4</li>
</ul>
</div>
<div class="footer">footer</div>
</body>
</html>
注意CSS开头的清除页面内外边距以及清除无序列表的小圆点的代码。
注意事项：1.网页布局一般首先使用标准流将父元素上下排列，然后利用浮动排列子元素。
2.一个元素浮动，其兄弟元素也浮动。浮动的元素只会影响其后面的标准流，不会影响前面的标准流。
二、清除浮动
有时候我们会遇见不方便直接给定父元素高度的情况，比如我们不知道内部的内容有多大的篇幅的时候。这种时候我们可以不设置父元素的高度，由内容来决定高度，但是内容由子元素容纳，如果子元素浮动那么父元素就没有高度了，这样显然会导致页面元素布局的混乱。为了消除浮动对标准流元素的影响，我们就需要清除浮动。清除浮动的方式有四种
1.额外标签法（隔墙法）
这是W3C的推荐做法，在每个浮动元素的后面额外加一个空标签，比如<div style=”clear:both”></div>，注意空标签必须是块级元素。这样左虽然简单易懂，但是代码中出现了大量无意义的标签，不利于结构化。
2.给父元素添加 overflow
给父元素添加，将溢出部分隐藏。代码简洁但是会将溢出部分隐藏，有时候不能满足要求。
3.:after 伪元素法
在父元素中添加下列代码。关于什么是伪元素后面会进行学习。
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、7 专有 */
*zoom: 1;
}
这种清除浮动的方法结构简单清晰，并且可以兼容低版本的浏览器。百度和网易使用的较多。
4.双伪元素清除浮动
使用方法同上
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
这种方法小米和腾讯使用较多。
一张图总结一下清除浮动的四种方法。
