资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

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://cdkjz.cn/article/gdgedj.html
    返回首页 了解更多建站资讯

    相关资讯

    多年建站经验

    多一份参考，总有益处

    联系快上网，免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈，可以通过以下方式与我们联系

    大客户专线   成都：13518219792   座机：028-86922220

    在线咨询 提交需求
    友情链接 交换友情链接
    微信小程序成都婚庆策划成都网站建设报价成都响应式网站建设联通机柜租用青羊区雕琢时光成都小程序定制开发公司申请域名虚拟主机深圳惠宜防蚊纱窗

    成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

    成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

    专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图