12 CSS 的float属性
  • 流动布局

流动模型（Flow），即文档流，浏览器打开HTML网页时，从上往下，从左往右，逐一加载。

在正常情况下，HTML元素都会根据文档流来分布网页内容的。

文档流有2大特征：

① 块状元素会随着浏览器读取文档的顺序，自上而下垂直分布，一行一个的形式占据页面位置。

② 行内元素会随着浏览器区队文档的顺序，从左往右水平分布，一行多个的形式占据页面位置。行内元素摆放满一行以后才会到下一行继续排列。

<!DOCTYPE HTML>

<html lang="en-US">

  <head>

    <title></title>

    <style>

    div{ border: 1px solid #f00; margin: 4px; }

    .d3{ width: 100px; }

    </style>

  </head>

  <body>

    <div>d1</div>

    <div>d2</div>

    <div class="d3">

      <span>span1</span>

      <a>a1</a>

      <a>a2</a>

      <span>span2</span>

    </div>

  </body>

</html>

执行代码效果：

  • 浮动模型

要学习浮动模型的布局模式，就要了解CSS提供的浮动属性（float）。浮动属性是网页布局中最常用的属性之一，通过浮动属性不但可以很好的实现页面布局，而且还可以依靠它来制作导航栏等页面功能。

简单浮动：

<!DOCTYPE HTML>

<html lang="en-US">

  <head>

    <title>简单浮动</title>

    <style>

        .c1{

            width: 200px;

            height: 200px;

            background-color: indianred;

            float: left;

        }

        .c2{

            width: 300px;

            height: 200px;

            background-color: orange;

            float: left;

        }

        .c3{

            width: 400px;

            height: 200px;

            background-color: lightblue;

            float: left;

        }

    </style>

  </head>

  <body>

   <div class="c1"></div>

   <div class="c2"></div>

   <div class="c3"></div>

  </body>

</html>

执行代码效果：

  • 字围效果
<!DOCTYPE HTML>

<html lang="en-US">

  <head>

    <title>字围效果</title>

    <style>

        .c1{

            width: 200px;

            height: 200px;

            background-color: indianred;

        }

        .c2{

            width: 300px;

            height: 200px;

            background-color: orange;

            float: left;

        }

        .c3{

            width: 400px;

            height: 400px;

            background-color: lightblue;

        }

    </style>

  </head>

  <body>

   <div class="c1">111</div>

   <div class="c2">222</div>

   <div class="c3">333</div>>

  </body>

</html>

执行代码效果：



案例：

<!DOCTYPE HTML>

<html lang="en-US">

  <head>

    <title>字围案例</title>

    <meta charset="utf8">

    <style>

        .c1{

            width: 500px;

        }

        img{

            float: left;

            width: 300px;

            height: 200px;

        }

    </style>

  </head>

  <body>

    <div class="c1">

           <img src="" alt="">

           <span class="text">

           </span>

    </div>

  </body>

</html>

当一个元素被设置浮动后，将具有以下特性：

  1. 任何申明为float 的元素都会自动被设置为一个行内块状元素，具有行内块状元素的特性。
  2. 假如某个元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
  3. 在标准浏览器中如果浮动元素a脱离了文档流，那么排在浮动元素a后的元素将会往回排列占据浮动元素a本来所处的位置，使页面布局产生变化。
  4. 如果水平方向上没有足够的空间容纳浮动元素，则转向下一行。
  5. 字围效果：文字内容会围绕在浮动元素周围。
  6. 浮动元素只能浮动至左侧或者右侧。
  7. 浮动元素只能影响排在其后面元素的布局，却无法影响出现在浮动元素之前的元素。
  • 清除浮动

网页布局中，最常用的布局便是浮动模型。但是浮动了以后就会破坏原有的文档流，使页面产生不必要的改动，所以我们一般在浮动了以后，达到目的了，就紧接着清除浮动。

在主流浏览器（如Firefox）下，如果没有设置height，元素的高度默认为auto，且其内容中有浮动元素时，在这种情况下元素的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的情况，叫“浮动溢出”，为了防止这个现象的出现而进行的CSS处理操作，CSS里面叫“清除浮动”。

<!DOCTYPE HTML>

<html lang="en-US">

  <head>

    <title></title>

    <meta charset="utf8">

    <style>

        .box{

            border: 1px solid red;

        }

        .c1{

            width: 200px;

            height: 200px;

            background-color: #336699;

            float: left;

        }

         .c2{

            width: 200px;

            height: 200px;

            background-color: orange;

            float: right;

        }

         .footer{

             width: 100%;

             height: 60px;

             background-color: yellowgreen;

         }

    </style>

  </head>

  <body>

    <div class="box">

        <div class="c1"></div>

        <div class="c2"></div>

    </div>

   <div class="footer"></div>

  </body>

</html>

执行代码效果：



clear是css中专用于清除浮动的，常用的属性值有以下几个：

值 描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。 
<!DOCTYPE HTML>

<html lang="en-US">

  <head>

    <title>简单浮动</title>

    <style>

        .c1{

            width: 200px;

            height: 200px;

            background-color: indianred;

            float: left;

            /*float: right;*/

        }

        .c2{

            width: 300px;

            height: 200px;

            background-color: orange;

            float: left;

            clear: left;

            /*clear: both;*/

        }

        .c3{

            width: 400px;

            height: 200px;

            background-color: lightblue;

            float: left;

        }

    </style>

  </head>

  <body>

   <div class="c1"></div>

   <div class="c2"></div>

   <div class="c3"></div>

  </body>

</html>

执行代码效果：



清除浮动解决父级塌陷问题：

  .clearfix:after {                         /*在类名为“clearfix”的元素内最后面加入内容*/

            content: ".";                    /*内容为“.”就是一个英文的句号而已。也可以不写。*/

            display: block;                  /*加入的这个元素转换为块级元素。*/

            clear: both;                     /*清除左右两边浮动。*/

            visibility: hidden;              /*可见度设为隐藏。注意它和display:none;是有区别的。*/

                                              /* visibility:hidden;仍然占据空间，只是看不到而已；*/

            line-height: 0;                  /*行高为0；*/

            height: 0;                       /*高度为0；*/

            font-size:0;                     /*字体大小为0；*/

        }

整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。

之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。

<div class="head clearfix"></div>

此外，还给父元素加上溢出隐藏属性（overflow: hidden;）来进行清除浮动。

12 CSS 的float属性的更多相关文章

  1. (十一)学习CSS之float属性

    参考:http://www.w3school.com.cn/cssref/pr_class_float.asp 定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕 ...

  2. CSS之float属性解读

    在web标准的网页中,页面各个元素都是以标准流的方式来进行布局的.即块元素占满指定的宽度,不指定宽度则占满整行(如<p>.<div>元素),内联元素则是在行内一个接一个的从左到 ...

  3. CSS中float属性和clear属性的一些笔记

    在学习CSS的最后一部分内容中,float属性和clear属性比较难以用语言描述,因此在笔记本中无法准确的记录这两个属性的用法.所以在博客园上以图文的形式记录这两种属性的特征,以备以后查阅. 首先,定 ...

  4. 【CSS】float属性

    float浮动属性1.作用: 将页面元素浮动起来,使其能够向左或者向右排列 2.应用: 实现页面中布局的左右排版 实现图文环绕的版式效果 3.值: 4.原理: 浮动元素将脱离默认的文档流,漂浮在默认文 ...

  5. CSS中float属性

    这个东西叫浮动.顾名思义,就是让设置的标签产生浮动效果,就是脱离原来页面的标准输出流.正常情况下,HTML页面中块元素都是从上倒下排列的.如果想实现左右结构.float的一种选择(当然还有其他方法). ...

  6. JS操作css的float属性的特殊写法

    使用js操作css属性的写法是有一定的规律的: 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin,obj.style.width,obj.sty ...

  7. CSS 浮动 float 属性

    浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 请看下图,当把框 1 向右浮动时,它 ...

  8. CSS之 float 属性

    特性: float的设计初衷仅仅是文字环绕效果  浮动具有破坏性,会使父容器高度塌陷  清除浮动方法: 1.脚底插入cleart:both 2.父元素BFC(IE8+)/haslayout(IE6/7 ...

  9. CSS——float属性备忘笔记

    通过指定CSS属性float的值,从而使元素向左或向右浮动,然后由后继元素向上移动以填补前面元素的浮动而空出的可用空间.CSS的float属性,作用就是改变块元素对象的默认显示方式,HTML标签设置了 ...

  10. CSS 布局Float 【0】

    float是 css 样式的定位属性.我们在印刷排版中,文本可以按照需要围绕图片.一般把这种方式称为“文本环绕”.在网页设计中,应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图 ...

随机推荐

  1. golang微服务实践：服务注册与服务发现 - Etcd的使用

    为什么? 为什么会有服务注册和服务发现?在它以前我们是怎么做的? 举个例子: 比如我们做MySQL读写分离,就在本地配置一个文件,然后程序读取这个配置文件里的数据进行数据库读写分离的设置. 但是随着业 ...

  2. InSAR处理软件——Gamma 安装教程

    Gamma是由瑞士 GAMMA Remote Sensing 公司开发SAR数据处理软件,支持SAR数据全流程处理,是最InSAR最常用的软件.下面介绍该软件的安装流程,安装环境为Ubuntu16.0 ...

  3. collections模块下的defaultdict用法

    defaultdict from collections import defaultdict s=[('yellow',1),('blue', 2), ('yellow', 3), ('blue', ...

  4. 【LeetCode动态规划#01】动规入门：求斐波那契数 + 爬楼梯 + 最小代价爬楼梯（熟悉解题方法论）

    斐波那契数 力扣题目链接(opens new window) 斐波那契数,通常用 F(n) 表示,形成的序列称为 斐波那契数列 .该数列由 0 和 1 开始,后面的每一项数字都是前面两项数字的和.也就 ...

  5. 矩池云产品最新动态 All in One

    AI/ML 的不断革新,让我们看到了更多激动人心的应用方向,也迸发了更多的训练&应用场景. 在用户的反馈和建议下,矩池云持续丰富和优化在 AI+Science 链路上的相关产品,为了帮助研究人 ...

  6. ECharts渐变温度直方图

    ECharts渐变直方图,根据具体的值调整色带,使所有颜色看起来协调一致. 直接在series数组中的对象中添加如下代码即可: itemStyle: { color: function (params ...

  7. The OCaml Language Cheatsheets

    The OCaml Language Cheatsheets OCaml v.4.08.1 Syntax Implementations are in .ml files, interfaces ar ...

  8. DataGear 自定义数据可视化图表

    DataGear内置了很多常用的图表(折线图.柱状图.饼图.散点图.雷达图.地图等等),能满足大部分数据可视化需求,当内置图表无法满足时,则可以通过自定义图表或插件的方式,实现特定业务的数据可视化需求 ...

  9. 【Azure 事件中心】通过 az rest --method get 如何获得Event Hub Entity 级的统计指标

    问题描述 通过 az rest --method get  如何获得Event Hub Entity 级的统计指标? 问题解答 查阅文档  https://learn.microsoft.com/en ...

  10. debian手册摘要

    apt-get source 包名 # 获取源码dpkg --info deb包名 # 查看包信息apt-cache show 包名 # 包信息(含有Depends.Suggests.Section. ...