CSS样式设置网页的浮动布局 设置浮动 清除浮动 溢出处理

这篇文章就来介绍一下网页的浮动和定位，这通常是网页设计的重点内容。在此之前需要了解一些基本的知识：

设置浮动

前面的内容只是铺垫，现在再来说说什么是浮动？浮动允许将元素浮动起来，脱离文档流向左或者向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。它的基本语法格式为：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属性来设置，那么知道了浮动，就需要知道如何清除浮动，那么为什么需要清楚浮动呢？

清除浮动使用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（溢出内容会被修剪，且浏览器会始终显示滚动条）