• 流动布局

流动模型（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. javascript现代编程系列教程之X——javascript人工智能

    JavaScript 在人工智能(AI)领域的应用主要体现在以下几个方面: 浏览器端的机器学习:TensorFlow.js 是一个在浏览器中运行的 JavaScript 机器学习库,它允许开发者训练和 ...

  2. ping的常用方法

    ping的常用方法 ping +ip tcping +ip+端口号(例如 tcping 127.0.0.1 8080) telnet +ip+端口号 nc -nzv +ip+端口号(linux用)

  3. 力扣182(java&python)-数组元素积的符号（简单）

    题目: 已知函数 signFunc(x) 将会根据 x 的正负返回特定值: 如果 x 是正数,返回 1 .如果 x 是负数,返回 -1 .如果 x 是等于 0 ,返回 0 .给你一个整数数组 nums ...

  4. Cube 技术解读 | 详解「支付宝」全新的卡片技术栈

    ​简介: 魔方卡片(Cube),让 App 首页实现敏捷更新. ​ CodeHub#7 正式落幕,来自蚂蚁集团的技术专家「京君」与掘金社区的开发者们分享了「支付宝」全新的卡片技术栈--魔方卡片(Cub ...

  5. 不只有 Spring，这四款 Java 基础开发框架同样值得关注！ 审核中

    Java 开发不只有 Spring ,今天给大家推荐几个同样优秀的 Java 基础开发框架,为日常项目开发提供更多的选择.答应我,请不要再叫我 Spring 小子了,​好吗? 项目概览: Guice: ...

  6. SpringCloud + Seata1.5.0（使用docker安装配置Seata；数据存储mysql、配置中心与注册中心nacos）

    1.seata介绍 Seata 是一款开源的分布式事务解决方案,致力于提供高性能和简单易用的分布式事务服务.Seata 将为用户提供了 AT.TCC.SAGA 和 XA 事务模式,为用户打造一站式的分 ...

  7. SpringBoot中几种好用的代码生成器(基于Mybatis-plus生成entity、mapper、xml等)

    前言 熟悉Spring框架的同学一定都知道MVC开发模式吧,控制器(Controller).业务类(Service).持久层(Repository).数据库映射(Mapper).各种DO类构成了我们服 ...

  8. 您可知道如何通过`HTTP2`实现TCP的内网穿透？？？

    可能有人很疑惑应用层 转发传输层?,为什么会有这样的需求啊???哈哈技术无所不用其极,由于一些场景下,对于一个服务器存在某一个内部网站中,但是对于这个服务器它没有访问外网的权限,虽然也可以申请端口访问 ...

  9. .Net 8.0 下的新RPC，IceRPC之"请求"生命线意义非凡

    作者引言 很高兴啊,我们来到了IceRPC之"请求"生命线意义非凡,号称"死亡时间"的追命线,颤抖吧! "请求"生命线之意义非凡 本文将深入 ...

  10. Spire.Doc 生成长图

    按模板生成内容,转换成长图保存: Document doc = new Document("A_BizRpt.docx"); ....... Image[] imgs = doc. ...