CSS样式设置网页的浮动布局 设置浮动 清除浮动 溢出处理
这篇文章就来介绍一下网页的浮动和定位，这通常是网页设计的重点内容。在此之前需要了解一些基本的知识：
—-静态定位元素static（默认值）
—-相对定位元素relative
—-绝对定位元素absoute ③ 当使用定位时，需要position属性和top、left、right、bottom这两类属性共同参与来决定一个元素的定位类型和偏移量。 3.定位元素之间的区别 ① relative相对定位 元素根据其在当前文档流所在位置作为参考系，进行偏移。定位之后原来元素在文档流中的位置被空出来，不会被其他元素占据。 ② absolute绝对定位 元素会将其带有position为非static的祖先元素作为参考系进行偏移。如果祖先元素里没有带position为非static的，则会以首屏作为参考系。定位之后，原来在文档流中占据的位置，会被其他元素所占据。 ③ fixed固定定位 根据当前可视区域进行定位，当文档流为多屏可滚动时，fixed定位的元素会跟对滚动而滚动。跟absolute定位一样，定位后，原来在文档流中占据的位置，会被其他元素所占据。
设置浮动
前面的内容只是铺垫，现在再来说说什么是浮动？浮动允许将元素浮动起来，脱离文档流向左或者向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。它的基本语法格式为：CSS选择器{float:属性值;}，属性值可以为left（元素向左浮动）、right（元素向右浮动）、none（元素不浮动，默认值）。
浮动与定位不同的是inline和inline-block的元素可以识别这种因浮动而脱离的文档流，从而不发生重叠！
<style type="text/css">
.a1,.a2,.a3{
width: 300px;
height: 200px;
}
.a1{
background-color: blue;
float: left;
}
.a2{
background-color: yellow;
float: left;
}
.a3{
background-color: red;
float: left;
}
</style>
<div class="a1">a1</div>
<div class="a2">a2</div>
<div class="a3">a3</div>浮动的规则比较乱，我们可以简单知道以下浮动的规则：
- 浮动元素会从最后一行最左侧的空白位置开始浮动。
- 如当前行无法容纳下自己的宽度，则垂直下沉到下一行，向左或者向右碰到包含框或另一个浮动框的边框为止。
清除浮动
简单来说浮动就是用float属性来设置，那么知道了浮动，就需要知道如何清除浮动，那么为什么需要清楚浮动呢？
清除浮动的特殊应用： 1.可以解决父元素高度塌陷问题。当一个元素包裹了一些float元素的时候，由于float元素脱离文档流显示，所以父元素无法被这些元素撑开高度，导致父元素高度为0. 2.最常用的一种解决方案是：设置父元素的after伪元素的clear属性来让其撑开父元素的高度。
清除浮动使用clear属性，它的基本语法格式为：选择器{clear:属性值;}，其属性值为left（不允许左侧有浮动元素，清除左侧浮动的影响）、right（不允许右侧有浮动元素，清除右侧浮动的影响）、both（同时清楚左右两侧浮动的影响）。浮动元素或者非浮动元素的块级元素都可以都可以使用这个属性来清除浮动（之前讲过inline和inline-block元素可以自动识别浮动，所以他们不需要清楚浮动）。那么使用clear属性的元素会在浮动元素的下方新开一行显示。
对于特殊的浮动，需要使用其它的方法，那么有空标记、overflow、after伪对象三种方式。
- 空标记：在浮动元素之后添加空标记，并对该标记应用“clear:both”样式，可以清除浮动。这个空标记为<div>、<p>、<hr>等任何标记。
- 对父元素使用overflow:hidden样式，也可以清除浮动对该元素的影响，该方法弥补了空标记清除浮动的不足。
- 对父元素使用after伪对象也可以清除浮动，但是该方法只适用于IE8以及以上版本浏览器和其他非IE浏览器。
<style type="text/css">
.div1{
background-color: blue;
/*width: 1000px; 第一种方式清除浮动
height: 1000px;*/
/*overflow: hidden; 第二种方式*/
}
/*left和right浮动之后 div1会消失*/
.left{
width: 300px;
height: 200px;
background-color: pink;
float: left;
}
.right{
width: 250px;
height: 190px;
background-color: red;
float: left;
}
/*.div2{
background-color: yellow;
clear: left;
/*clear: both; } 第三种方式*/
.div1:after{
content: "";
clear: both;
display: block;
}
</style>
<div class="div1">
<div class="left"></div>
<div class="right"></div>
<!--<div class="div2">我是div2</div>-->溢出处理
当块元素中的内容超出了元素的边界，就会出现溢出的情况，默认情况下内容是不会被修剪的，会呈现在元素框之外。处理溢出使用overflow属性，它的基本语法格式为：CSS选择器{overflow:属性值;}，其属性值有四种，分别为visible（默认值，内容不会被修剪，会呈现在元素框之外）、hidden（溢出内容会被修剪，并且被修剪的内容是不可见的）、auto（在需要时产生滚动条，即自适应索要显示的内容）、scroll（溢出内容会被修剪，且浏览器会始终显示滚动条）
