float属性详解

内容：

1.block与inline复习

2.float介绍及其作用

3.清除浮动

1.block与inline复习

 1 block元素是独立的一块，独占一行
 2 多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度
 3 block元素可以设置width、height、margin、padding属性；
 4 
 5 
 6 inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行
 7 inline元素其宽度随内容而变化。inline元素设置width、height属性无效
 8 inline元素的margin和padding属性：
 9 水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果
10 竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
11 
12 
13 常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
14 常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等

2.float介绍及其作用

float让标签浮动起来，让块级标签也可以堆叠，见下面的代码：

 1 <!--__author__ = "wyb"-->
 2 <!DOCTYPE html>
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>float</title>
 7     <style>
 8         body{
 9             margin: 0 auto;
10         }
11         .common{
12             width: 200px;
13             height: 200px;
14             float: left;
15             margin-right: 10px;
16         }
17         .i1{
18             background: #41db50;
19         }
20         .i2{
21             background: #2d4ca2;
22         }
23         .i3{
24             background: red;
25         }
26         .i4{
27             background: #006666;
28         }
29     </style>
30 </head>
31 <body>
32 <div class="common i1"></div>
33 <div class="common i2"></div>
34 <div class="common i3"></div>
35 <div class="common i4"></div>
36 </body>
37 </html>

3.清除浮动

1 clear语法：
2 clear : none | left | right | both
3 取值：
4 none : 默认值。允许两边都可以有浮动对象
5 left : 不允许左边有浮动对象
6 right : 不允许右边有浮动对象
7 both : 不允许有浮动对象
8 但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素
9 如果一个元素的右侧有一浮动对象，而这个元素设置了不允许右边有浮动对象，即clear：right，则这个元素会自动下移一格，达到本元素右边没有浮动对象的目的。

清除浮动 - 给浮动的元素的父元素加上以下两段代码中任意一段即可：

1 .clearfix:after{
2     content: "";
3     display: block;
4     clear: both;
5 }

 1 .clearfix:after {            
 2 content: "";                
 3 display: block;         
 4 clear: both;              
 5 visibility: hidden;         
 6 line-height: 0;       
 7 height: 0;               
 8 font-size:0;                 
 9 } 
10 .clearfix { *zoom:1;} --针对于IE6，因为IE6不支持:after伪类，zoom:1让IE6的元素可以清除浮动来包裹内部元素

猜你喜欢