• 流动布局

流动模型（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>

　　

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

任何申明为float 的元素都会自动被设置为一个行内块状元素，具有行内块状元素的特性。

假如某个元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。

在标准浏览器中如果浮动元素a脱离了文档流，那么排在浮动元素a后的元素将会往回排列占据浮动元素a本来所处的位置，使页面布局产生变化。

如果水平方向上没有足够的空间容纳浮动元素，则转向下一行。

字围效果：文字内容会围绕在浮动元素周围。

浮动元素只能浮动至左侧或者右侧。

浮动元素只能影响排在其后面元素的布局，却无法影响出现在浮动元素之前的元素。

　　

  • 清除浮动

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

在主流浏览器（如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;）来进行清除浮动。

CSS——float浮动属性的更多相关文章

  1. [转] CSS float 浮动属性

    http://www.cnblogs.com/polk6/p/3142187.html CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式: ...

  2. CSS float 浮动属性

    本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...

  3. 【CSS学习】--- float浮动属性

    一.前言 浮动元素以脱离标准流的方式来实现元素的向左或向右浮动,并且浮动元素还是在原来的行上进行浮动的.float浮动属性的四个参数:left:元素向左浮动:right:元素向右浮动:none:默认值 ...

  4. 给li设置float浮动属性之后，无法撑开外层ul的问题。

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...

  5. 给li设置float浮动属性之后，无法撑开外层ul的问题。（原址：http://www.cnblogs.com/cielzhao/p/5781462.html）

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...

  6. 对css float 浮动的学习心得

    css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...

  7. DIV CSS float浮动

    一.浮动? #CSS样式的float浮动属性,用于设置标签对象(如:<div>标签盒子.<span>.<a>.等html标签)的浮动布局. #通过定义浮动(floa ...

  8. [Web前端] 给li设置float浮动属性之后，无法撑开外层ul的问题。

    cp from : https://www.cnblogs.com/cielzhao/p/5781462.html 最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style ...

  9. css float 浮动

    CSS Float(浮动) 什么是 CSS Float(浮动)?大理石平台价格 CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. Float(浮动),往往是用于图像, ...

  10. CSS：CSS Float(浮动)

    ylbtech-CSS:CSS Float(浮动) 1.返回顶部 1. CSS Float(浮动) 什么是 CSS Float(浮动)? CSS 的 Float(浮动),会使元素向左或向右移动,其周围 ...

随机推荐

  1. Lattice高速下载器HW-USBN-2B 如何申请 license

    如果用的芯片不是停产老旧芯片,Diamond programmer 是不需要 license 绑定支持的. 但是有些需要编程老旧的芯片.需要安装 Diamond programmer stand-al ...

  2. 微信小程序三种授权登录的方式

    经过一段时间对微信小程序的研发后 总结出以下三种授权登录的方式,我给他们命名为'一次性授权''永久授权''不授权' 1.一次性授权常规写法,需要获取用户公开信息(头像,昵称等)时,判断调取授权登录接口 ...

  3. mysql错误ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)

  4. 力扣405(java)-数字转换为十六进制（简单）

    题目: 给定一个整数,编写一个算法将这个数转换为十六进制数.对于负整数,我们通常使用 补码运算 方法. 注意: 十六进制中所有字母(a-f)都必须是小写.十六进制字符串中不能包含多余的前导零.如果要转 ...

  5. 聊聊 Linux iowait

    哈喽大家好,我是咸鱼. 我们在使用 top 命令来查看 Linux 系统整体 CPU 使用情况的时候,往往看的是下面这一列: %Cpu(s): 0.0 us, 0.0 sy, 0.0 ni,100.0 ...

  6. 科普达人丨一图看懂阿里云ECS

    简介: 建议收藏  原文链接:https://click.aliyun.com/m/1000363154/ 本文为阿里云原创内容,未经允许不得转载.

  7. 3 种发布策略，解决 K8s 中快速交付应用的难题

    作者 | 郝树伟(流生)阿里云高级研发工程师 前言 软件技术更新换代很快,但我们追求的目标是一直不变的,那就是在安全稳定的前提下,增加应用的部署频率,缩短产品功能的迭代周期,这样的好处就是企业可以在更 ...

  8. [FAQ] uni-app 如何让页面不展示返回箭头图标

    默认情况是,有历史上一页的 页面会在左上角展示返回图标. 比如登录页不想展示返回,在跳转进来时可以使用 uni.redirectTo({}),它能够关闭其它页面,这样当前页就不会有返回箭头了. Ref ...

  9. [Cryptocurrency] rDAI 与 DAI 的区别, 如何质押 rDAI 获取利息

    以下合约操作需要在安装 MetaMask ( 以太坊的浏览器钱包 ) 的情况下进行. rDAI 通过和 DAI  1 : 1 互换得到,在 rDAI 提供的 dapp 上面操作 https://app ...

  10. dotnet ConditionalWeakTable 的底层原理

    在 dotnet 中有一个特殊的类,这个类能够做到附加属性一样的功能.也就是给某个对象附加一个属性,当这个对象被回收的时候,自然解除附加的属性的对象的引用.本文就来聊聊这个类的底层原理 小伙伴都知道弱 ...