css浮动

一、行内标签和块状标签

HTML标签的分类可以分为行内标签和块状标签，在默认情况下，他们的特点如下：

行内标签特点：（1）从左向右排列；（2）不能设置元素的宽度和高度

块状标签特点：（1）从上向下排列；（2）可以设置元素的宽度和高度

常用行内标签有：

常用块状标签有：

备注：HTML标签的显示类型是行内还是块状，元素本身是有自己的默认值的，但是我们也可以通过display样式来修改其显示类型。

二、display

display 属性设置元素的显示类型。

设置元素显示类型为行内：

div{display: inline;}

设置元素显示类型为块状：

div{display: block;}

设置元素显示类型为行内块状：

div{display: inline-block;}

备注：display: inline-block;表示该元素既有行内的特征，又有块状的特征；具体表现为：排列方式为行内排列方式，即可以从左向右排列，并且也有块状的特征，可以设置元素的宽度和高度。

设置元素隐藏：

display: none;

备注：上述语法可以设置元素隐藏，和设置visibility是有区别的，通过设置display隐藏，将隐藏整个元素，元素占用的网页位置也会消失，而通过设置visibility隐藏，是隐藏的元素内部的内容，元素仍然保持原来的位置和大小。

三、浮动

CSS 的 Float（浮动），会使元素向左或向右排列，其周围的元素也会重新排列。

如果希望将默认情况下从上向下排列的3个DIV从左向右排列，可以进行如下设置：

#div1,#div2,#div3{
    width: 200px; height: 200px; margin: 10px;
    background-color: red;
    float: left;  				
}
#divbig{ width: 800px;}

<div id="divbig">
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
</div>

样式表中设置了div1,div2,div3三个div的float:left; 所以三个DIV可以从左向右排列，如果设置成float:right; 也可以设置这三个DIV从右向左排列。

在上述代码中，三个小DIV的高度都是200px；通过浏览器调试可以发现包含三个小DIV的大DIV，即divbig的高度为0。这个是不合理的，大DIV的高度应该最少在200px；这种现象叫做"浮动塌陷"，浮动塌陷会给只有的网页排布带来不可预知的麻烦，所以我们必须要解决浮动塌陷问题。

四、清除浮动

clear 属性指定元素两侧不能出现浮动元素

clear:both;  

五、浮动塌陷的解决方案

（1）固定父亲容器的高度解决塌陷

#div1,#div2,#div3{
    width: 200px; height: 200px; margin: 10px;
    background-color: red;
    float: left;  				
}
/*在这里设置固定高度解决浮动塌陷*/
#divbig{ width: 800px; height:210px;}  

<div id="divbig">
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
</div>

此方案不够灵活，如果子元素实际高度发生变化，必须要同时修改父元素的高度才行。

（2）空div解决塌陷

#div1,#div2,#div3{
    width: 200px; height: 200px; margin: 10px;
    background-color: red;
    float: left;  				
}
#divbig{ width: 800px;}
.clear{ clear: both;}   /*在此处设置清除两侧浮动*/

<div id="divbig">
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
    <div class="clear"></div>  <!--在此处添加一个空DIV-->
</div>

此方案也不够灵活，需要修改HTML结构代码。

（3）父级添加overflow属性解决塌陷

#div1,#div2,#div3{
    width: 200px; height: 200px; margin: 10px;
    background-color: red;
    float: left;  				
}
#divbig{ width: 800px; overflow: hidden;}  /*此处设置overflow属性解决塌陷*/

<div id="divbig">
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
</div>

overflow设置内容溢出当前容器的处理方式，各个取值的含义如下：

overflow: visible;  /*溢出部分可见*/
overflow: hidden;   /*溢出部分不可见*/
overflow: scroll;   /*容器产生滚动条*/
overflow: auto;	    /*当有内容溢出的时候产生滚动条，没有内容溢出的时候不产生滚动条*/

（4）父级添加伪类after解决塌陷

#div1,#div2,#div3{
    width: 200px; height: 200px; margin: 10px;
    background-color: red;
    float: left;  				
}
#divbig{ width: 800px;}
/*添加伪类after解决塌陷*/
.clear:after{
	content: '';         
	display: block;      
	clear: both;          
}

<div id="divbig" class="clear">  <!--此处给父级设置clear类样式-->
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
</div>