• 流动布局

流动模型（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. 基于 Java 编程生成二维码图片

    0x01 准备 (1)软件版本 IntelliJ IDEA 2023.1.3 JDK 18 Tomcat 10.1.11 Maven 3.8.6 (2)技术栈 servlet zxing 谷歌项目 生 ...

  2. iOS自动化打包命令xcodebuild大全

    iOS实现自动化打包已经稳定运营几年了,不同的场景用到xcodebuild命令不一样,有的参数可能一直都用不到,列举一些常用的命令,比如编译命令: xcodebuild archive -worksp ...

  3. k8s架构与原理介绍

    K8s概述 目录 K8s概述 1.什么是K8s 2.K8s 设计架构 3. k8s重要节点描述 4. 过程原理: 5. k8s的核心功能 6. k8s的历史 7. k8s的安装方式 8. k8s的应用 ...

  4. 为 Serverless Devs 插上 Terraform 的翅膀，解耦代码和基础设施，实现企业级多环境部署（下）

    简介: 在上篇<为 Serverless Devs 插上 Terraform 的翅膀,实现企业级多环境部署(上)>中,主要介绍了 Serverless Devs 多环境功能的使用,用户读完 ...

  5. BladeDISC 0.2.0更新发布

    ​简介:在BladeDISC正式开源三个月后,我们发布了0.2.0版本,该更新包含了大量的性能优化与功能增强. 在BladeDISC正式开源三个月后,我们发布了0.2.0版本,该更新包含了大量的性能优 ...

  6. Fluid — 云原生环境下的高效“数据物流系统”

    简介: 为了解决大数据.AI 等数据密集型应用在云原生计算存储分离场景下,存在的数据访问延时高.联合分析难.多维管理杂等痛点问题,南京大学 PASALab.阿里巴巴.Alluxio 在 2020 年 ...

  7. Lakehouse 架构解析与云上实践

    ​简介:本文整理自 DataFunCon 2021大会上,阿里云数据湖构建云产品研发陈鑫伟的分享,主要介绍了 Lakehouse 的架构解析与云上实践. 作者简介:陈鑫伟(花名熙康),阿里云开源大数据 ...

  8. Dubbo-Admin 正式支持 3.0 服务治理

    ​简介:Dubbo 相信大家并不陌生,是一款微服务开发框架,它提供了 RPC 通信与微服务治理两大关键能力.大家在日常开发中更多使用的是 Dubbo 提供的 RPC 通信这一部分能力,而对其提供的服务 ...

  9. [ELK] Docker 运行 Elastic Stack 支持 TLS 的两种简单方式

    第一种就是 按照官方文档进行配置,指定证书位置开启. Run the Elastic Stack in Docker with TLS enabled. 第二种就是 9200 端口只暴露给本机,127 ...

  10. 如何通过前后端交互的方式制作Excel报表

    前言 Excel拥有在办公领域最广泛的受众群体,以其强大的数据处理和可视化功能,成了无可替代的工具.它不仅可以呈现数据清晰明了,还能进行数据分析.图表制作和数据透视等操作,为用户提供了全面的数据展示和 ...