CSS3快速入门：五、浮动

浮动

  在CSS中，浮动是非常重要的一个功能，主要是用来控制行元素或者块元素并列显示或者向左或者向右浮动。

CSS系列文章目录

1. CSS3快速入门：一、三种CSS导入方式
2. CSS3快速入门：二、CSS选择器
3. CSS3快速入门：三、美化网页
4. CSS3快速入门：四、盒子模型
5. CSS3快速入门：五、浮动
6. CSS3快速入门：六、定位

1. 标准文档流

  CSS中标准文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元元素，其中块级元素独占一行，而行内元素可以自左至右排列，且行内元素可以包含在块级元素中，反之却不可以。如图：

2. display

  display属性的几个常用属性值：

• block：块元素。
• inline：行内元素。
• inline-block：块元素，但具有行内元素并排显示的特性。
• none：隐藏元素，其对应的物理位置也消失。

  display属性练习代码如下：

    
    
    


    

        
许嵩
        
        

            个人简介：许嵩（Vae），1986年5月14日生于安徽省合肥市，
            中国内地流行乐男歌手、词曲创作人、音乐制作人，
            现任海蝶音乐公司（现为太合音乐集团）音乐总监，毕业于安徽医科大学。
        
        

            
已发表的专辑：
            

                
自定义
                
寻雾启示
                
苏格拉没有底
                
梦游计
                
不如吃茶去
                
青年晚报
                
寻宝游戏
            
        
        新浪微博
        Vae+
        
因为一个人 爱上一群人
    

  网页显示如下：

3. float

  css样式的float属性，用于设置标签对象的浮动布局，浮动也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right),其属性默认值为none不浮动。
  代码示例如下：

  网页显示如下：

4. 清除浮动

  清除浮动的方式如下：

• clear属性：left，在左侧不允许浮动元素；right，在右侧不允许浮动元素；both，在左右两侧均不允许浮动元素。clear:left|right|both;
• 增加一个空的div块，再clear:both。
• 设置父级元素的高度。
• overfloat属性： overflow:hidden。
• :after伪类：父级元素:after{ content: ""; display:block; clear:both; }。

5. 浮动（float）与inline-block

• 共性：使块级元素能够在同一行显示，在某程度上二者达到一样的效果。
• 区别：对元素设置display：inline-block ，元素不会脱离文本流，但float就会使得元素脱离文本流，会产生父元素高度坍塌的效果。