RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间：8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
  

  •         

    •   

    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.              左浮动+固定宽度

      

  •              右边自适应宽度+margin-left

    •   

  •          

    •   

    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.              右浮动+固定宽度

      

  •              左边自适应宽度+margin-right

    •   

  •          

    •   

    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://jxjierui.cn/article/gdgedj.html

    其他资讯

    Top