189 8069 5689

CSS属性float的用法

本篇内容主要讲解“CSS属性float的用法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS属性float的用法”吧!

成都创新互联是专业的山东网站建设公司，山东接单;提供成都网站建设、成都做网站,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行山东网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

我们来看看CSS重要属性--float。

以下内容分为如下小节：

1：float属性

2：float属性的特性   

2.1：float之文字环绕效果

2.2：float之父元素高度塌陷

3：清除浮动的方法

3.1：html法

3.2：css伪元素法

4：float去空格化

5：float元素块状化

6：float流体布局   

6.1：单侧固定

6.2：DOM与显示位置不同的单侧固定

6.3：DOM与显示位置相同的单侧固定

6.4：智能布局

1：float属性

  float，顾名思义是漂浮，浮动的意思。但是在css中，它被理解成浮动。float有四个属性，即

CSS Code复制内容到剪贴板

  1. float:none;   

  2. float:left;   

  3. float:rightright;   

  4. float:inherit;  

比较常用的两个属性值是左浮动和右浮动。在接下来的分享中，只会拿左浮动作为例子。其他浮动属性值与左浮动原理相同。

2：float属性的特性

2.1：float之文字环绕效果

浮动的初衷就是为了文字环绕效果。

看如下代码和demo。

XML/HTML Code复制内容到剪贴板

  1.   

  2.     

  

  •     

      

  • Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!   

  •         

      

  •     

    •   

    CSS Code复制内容到剪贴板

    1. .container {   

    2.   width: 300px;   

    3.   height: 300px;   

    4.   border: 1px solid black;   

    5. }   

    6. .container .content {   

    7.   float: left;   

    8.   width: 150px;   

    9.   height: 150px;   

    10.   background-color: lightpink;   

    11.   margin: 5px;   

    12. }  

    CSS属性float的用法

    content 元素设置了左浮动，使div元素脱离文档流，文字在其周围坏绕显示。

    2.2：float之父元素高度塌陷

    以div元素为例。div元素的高度会通过内容自动撑开。也就是说，内容有多少，高度就有多高。但是当内部元素设置了float属性之后，会是父元素高度塌陷。代码和实例如下。

    XML/HTML Code复制内容到剪贴板

    1.   

    2.     

        

    3. Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!   

    4.     

        

      

    如下，塌陷后css和demo。

    CSS Code复制内容到剪贴板

    1. .container {   

    2.   width: 300px;   

    3.   border: 1px solid black;   

    4. }   

    5. .container p {   

    6.   float: left;   

    7. }  

    CSS属性float的用法

    3：清除浮动的方法

    那么问题来了，如果内部元素要设置浮动，那如何避免父元素高度塌陷的问题呢？

    有同学肯定会想，直接在父元素设置高度不就可以了吗？这在实际中是不行的。因为如果固定了父元素的高度，那如果之后想在其添加内容，不是又要去修改css代码了，特麻烦。

    那解决父元素高度塌陷有两种方法。

    3.1：父元素底部添加空div，然后在添加属性clear : both。

    代码如下。

    XML/HTML Code复制内容到剪贴板

    1.   

    2.             

        

    3.             Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!   

    4.             

        

    5.               

    6.           

    CSS Code复制内容到剪贴板

    1. .container {   

    2.   width: 300px;   

    3.   border: 1px solid black;   

    4. }   

    5. .container p {   

    6.   float: left;   

    7. }   

    8. .container .clearfix {   

    9.   overflow: hidden;   

    10.   *zoom: 1;   

    11. }  

    3.2：父元素设置伪类after。

    XML/HTML Code复制内容到剪贴板

    1.   

    2.             

        

    3.             Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!   

    4.             

        

    5.           

    CSS Code复制内容到剪贴板

    1. .container {   

    2.   width: 300px;   

    3.   border: 1px solid black;   

    4.   *zoom: 1;   

    5. }   

    6. .container p {   

    7.   float: left;   

    8. }   

    9. .container:after {   

    10.   content: "";   

    11.   display: table;   

    12.   clear: both;   

    13. }  

    4：float元素去空格化

    是什么意思呢？在平时的编码中，为了要符合HTML编码规范，都会为html标签添加缩进，达到美观的效果。可是缩进时就会产生空格，也就是 。当给元素设置左浮动时，元素本身左浮动，剩余的空格会被挤到最后，也就是上文所说的文字环绕效果。但是，要记住一点， 和回车敲下的空格的效果略有不同。

    5：float元素块状化

    在为内联元素设置浮动属性之后，display属性由inline变成block。并且可以为内联元素设置宽高。使用float加width属性可以实现一些简单的固定宽度的布局效果。

    6：float流体布局

    6.1：单侧固定，右侧自适应的布局。

    XML/HTML Code复制内容到剪贴板

    1.   

    2.              左浮动+固定宽度  

    3.              右边自适应宽度+margin-left  

    4.            

    CSS Code复制内容到剪贴板

    1. .container{   

    2.     max-width:90%;   

    3.     margin:0 auto;   

    4. }   

    5.   

    6. .left{   

    7.     float:left;   

    8.     text-align:center;   

    9.     background-color: lightpink;   

    10.     width: 200px;   

    11.     height:300px;   

    12. }   

    13.   

    14. .rightright{   

    15.     background-color: lightyellow;   

    16.     margin-left:200px;   

    17.     height:300px;   

    18.     padding-left:10px;   

    19. }  

    6.2：DOM与显示位置不同的单侧固定

    XML/HTML Code复制内容到剪贴板

    1.   

    2.              右浮动+固定宽度  

    3.              左边自适应宽度+margin-right  

    4.            

    CSS Code复制内容到剪贴板

    1. .container {   

    2.   max-width: 90%;   

    3.   margin: 0 auto;   

    4. }   

    5. .container .rightright {   

    6.   float: rightright;   

    7.   width: 200px;   

    8.   height: 200px;   

    9.   background-color: lightpink;   

    10. }   

    11. .container .left {   

    12.   background-color: lightyellow;   

    13.   margin-right: 200px;   

    14.   height: 300px;   

    15.   padding-left: 10px;   

    16. }  

    也就是说，html元素与显示在页面上的元素位置不相同。

    6.3：DOM与显示位置相同的单侧固定

    XML/HTML Code复制内容到剪贴板

    1.   

    2.               

    3.                   

    4.                 margin-right  

    5.               

    6.             左浮动+固定宽度+margin-left负值  

    7.           

    CSS Code复制内容到剪贴板

    1. .container {   

    2.   max-width: 90%;   

    3.   margin: 0 auto;   

    4. }   

    5. .container .rightright {   

    6.   float: left;   

    7.   width: 200px;   

    8.   height: 200px;   

    9.   background-color: lightpink;   

    10.   margin-left: -200px;   

    11.   height: 300px;   

    12. }   

    13. .container .left {   

    14.   background-color: lightyellow;   

    15.   margin-right: 200px;   

    16.   height: 300px;   

    17.   text-align: center;   

    18. }  

    6.4：智能布局

    所谓智能布局，就是两栏都不需要设置宽度，宽度随内容自适应。

    XML/HTML Code复制内容到剪贴板

    1.   

    2.               

    3.                 float+margin-right+自适应宽度   

    4.               

    5.               

    6.                 display:table-cell  ---IE8+;   

    7.                 display:inline-block   ---IE7+;   

    8.                 自适应宽度   

    9.               

    10.           

    CSS Code复制内容到剪贴板

    1. .container {   

    2.   max-width: 90%;   

    3.   margin: 0 auto;   

    4. }   

    5. .container .left {   

    6.   float: left;   

    7.   height: 300px;   

    8.   background-color: lightpink;   

    9. }   

    10. .container .rightright {   

    11.   display: table-cell;   

    12.   *display: inline-block;   

    13.   height: 300px;   

    14.   background-color: lightyellow;   

    15. }  

    CSS Code复制内容到剪贴板

    1. .container {   

    2.   max-width: 90%;   

    3.   margin: 0 auto;   

    4. }   

    5. .container .left {   

    6.   float: left;   

    7.   height: 300px;   

    8.   background-color: lightpink;   

    9. }   

    10. .container .rightright {   

    11.   display: table-cell;   

    12.   *display: inline-block;   

    13.   height: 300px;   

    14.   background-color: lightyellow;   

    15. }  

    总结以下：

    1：当一个元素设置float属性时，会使元素块状化。

    2：float属性的创造初衷就是为了文字环绕效果而生的。

    3：float元素会使父元素高度塌陷。

    4：float元素会除去换行带来的空格。

    5：使用float可以实现两栏自适应的布局。

    到此，相信大家对“CSS属性float的用法”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！


    名称栏目：CSS属性float的用法
    标题路径：http://cdxtjz.com/article/gdgedj.html

    其他资讯