从CSS学习笔记05 display属性一文中，我们知道div是块元素，会独占一行，即使div的宽度很小，像下面这样

应用display属性的inline属性可以让div与div共享一行，除了这种方法外，还有没有其他方法可以实现这种效果呢，答案是肯定的，那就是下面要介绍的CSS的浮动特性，浮动从字面意思上来看，就是浮起来，动起来，那么是谁浮起来，又是谁动起来呢？往下看，很快就会知道答案了。

元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，漂浮在标准流之上。元素浮动后，虽然脱离标准流，但还是会影响标准流的布局。

在CSS中，通过float属性来定义浮动，其基本语法格式如下：选择器{float:属性值;}，默认值为none（不浮动），另外用left表示左浮动，可以理解为漂浮起来后靠左排列，right表示右浮动，自然的就是靠右排列。

现在我们给div2设置浮动，看看会出现什么效果

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>浮动</title>

     <style type="text/css">

         .div1 {background-color: red; height: 50px; width: 400px;}

         .div2 {background-color: blue; height: 100px; width: 100px; float: left;}

         .div3 {background-color: gray; height: 150px; width: 400px;}

         .div4 {background-color: green; height: 30px; width: 600px;}

     </style>

 </head>

 <body>

     <div class="div1">div1</div>

     <div class="div2">div2</div>

     <div class="div3">这是div3这是div3这是div3这是div3这是div3这是div3这是div3这是div3这是div3这是div3这是div3这是div3</div>

     <div class="div4">div4</div>

 </body>

 </html>

这时候div2的位置并没有变化，而div3向上移动了，与div2共用一行，相当于div2不占用页面的空间了，不过影响了div3中的文字布局。从这里也可以清楚的看出，是浮动的对象div2先漂浮起来，然后后面的对象div3会向它原来的位置动起来，这也解答了刚开始提出的问题。

浮动是将块元素独占一行的行为取消，将这个块从原来的文档流模式中，可以理解为它飘起来了，它原来的地方就空出来了，它的内容分离出来，这样它后面的对象就当它不存在了。

接下来给div3也设置一下浮动，会有什么意想不到的结果出现吗？

这时，由于div2与div3同时设置了浮动，所以都脱离了标准流，因此div4向上移动与div1组成了一个新的标准流，而浮动的元素是“浮”在标准流的元素之上的，所以div4被div2，div3挡住了一部分。

从上面的现象可以看出，给div3设置浮动之后，div3是紧接着跟在div2后面的，但是div2也是设置了浮动的，可是div2并没有跟在div1后面，这里可以得出一个结论：

浮动的元素A排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐（也就是紧挨着上一个元素的后面），如果一行放不下，A元素则会被挤到下一行；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。

假如把div4也设置成左浮动，效果如下

我们来一起分析一下，首先看div4，它的上一个元素div3设置了左浮动，所以div4的顶部与div3的顶部对齐，接着看div3，div3的上一个元素div2也设置了左浮动，所以div3的顶部与div2的顶部对其，现在看div2，div2的上一个元素是div1，但是div1并没有设置浮动属性，属于标准流，所以div2的顶部与div1的底部对齐。

或许有人会想如果要让div4独占一行，该怎么办？这就需要用到CSS的清除浮动，清除浮动的关键字是clear，它有如下几个值

再来看div2设置左浮动的现象

因为div3的上一个元素div2设置了左浮动，所以div3占据了元素div2的空间，因为div3的宽高比div2的宽高都大，所以div3被div2挡住了一部分，我们知道标准流中的元素都是没有设置浮动属性的，所以需要清除掉div2元素浮动给div3造成的影响，由于div2是左浮动，因此为div3清除左边的浮动

现象与原来没有设置浮动一样，好，现在div2与div3同时设置左浮动，我想应该可以比较容易的知道如何让div4独占一行了。

清除浮动其他属性值可以自行类推并测试出来。有了上面的基础，我们就可以做出以下比较常见的网页布局。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>常见布局</title>

     <style type="text/css">

         .head {background-color: red; height: 50px; width: 500px;}

         .sidebar {background-color: blue; height: 200px; width: 100px; float: left;}

         .main {background-color: gray; height: 200px; width: 400px; float: left;}

         .foot {background-color: green; height: 30px; width: 500px; clear: left;}

     </style>

 </head>

 <body>

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

     <div class="sidebar">sidebar</div>

     <div class="main">main</div>

     <div class="foot">foot</div>

 </body>

 </html>

清除浮动的几种方法

说到浮动，就有必要说下清除浮动，在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

看现象，正常情况下我们希望div的排列方式像下面这样

实际上很可能是这样，父容器的高度变为了0，也是常说的高度坍塌

下面介绍几种常用的解决方法

1、添加额外标签

这种方法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”>，该方法容易理解，容易掌握，但是会在页面中添加很多没有意义的空标签，建议不要使用。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>清除浮动</title>

     <style type="text/css">

         .child {background-color: #95E1D3; border: 3px solid #FCE38A; margin: 5px; width: 100px; height: 100px; float: left;}

         .parent {width: 350px; border: 3px solid #95E1D3;}

         .clear {clear: both;}

     </style>

 </head>

 <body>

     <div class="parent">

         <div class="child"></div>

         <div class="child"></div>

         <div class="clear"></div>

     </div>

 </body>

 </html>

可以将16行代码注释掉然后对比下效果。

2、父元素设置 overflow：hidden

这个方法主要用到BFC的特性，下一篇会讲到，根据BFC特性，也可以设置为 overflow：auto

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>清除浮动</title>

     <style type="text/css">

         .child {background-color: #95E1D3; border: 3px solid #FCE38A; margin: 5px; width: 100px; height: 100px; float: left;}

         .parent {width: 350px; border: 3px solid #95E1D3; overflow: hidden;}

     </style>

 </head>

 <body>

     <div class="parent">

         <div class="child"></div>

         <div class="child"></div>

     </div>

 </body>

 </html>

3、使用:after 伪元素

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>清除浮动</title>

     <style type="text/css">

         .child {background-color: #95E1D3; border: 3px solid #FCE38A; margin: 5px; width: 100px; height: 100px; float: left;}

         .parent {width: 350px; border: 3px solid #95E1D3;}

         .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both;}

         .clearfix{zoom:1} // 为了兼容IE，触发hasLayout

     </style>

 </head>

 <body>

     <div class="parent clearfix">

         <div class="child"></div>

         <div class="child"></div>

     </div>

 </body>

 </html>

通过 content:"."　　生成内容作为最后一个元素，至于content里面是点还是其他都是可以的

display:block　　使生成的元素以块级元素显示

height:0　　避免生成内容破坏原有布局的高度

visibility:hidden　　使生成的内容不可见

clear:both　　清除浮动

一种更简单的写法，效果一样

.clearfix{overflow:auto; height:1%}

通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格"020"或点"."，并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;触发haslayout。

CSS学习笔记08 浮动的更多相关文章

  1. html+css学习笔记 3[浮动]

    inline-block/float(浮动) 回顾:inline-block 特性:      1.块在一排显示 2.内联支持宽高 3.默认内容撑开宽度 4.标签之间的换行间隙被解析(问题) 5.ie ...

  2. CSS学习笔记：浮动属性

    目录 一.浮动流是什么 二.通过代码实例了解浮动特点 1. 搭建测试框架 2. 添加浮动 3. 浮动元素的排布 4. 给行内元素添加浮动效果 5. 子元素浮动后对父元素的影响 5.1 在父元素中添加o ...

  3. CSS学习笔记10 相对定位，绝对定位与固定定位

    文档流中的元素的位置由元素在 (X)HTML 中的位置决定,这就是最原始的普通流,前面讲到的浮动CSS学习笔记08 浮动可以改变元素在文档流中的位置,除了这个我们还可以通过使用CSS的position ...

  4. div+css学习笔记一（转）

    div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中 背景图片 ie6 ie7 margin 杂谈 分类: 网页制作 1.IE6中用了float之后导致m ...

  5. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  6. css学习笔记四

    广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...

  7. CSS学习笔记09 简单理解BFC

    引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  8. CSS学习笔记之样式声明

    目录 1.背景 2.文本 3.字体 4.列表 5.表格 6.轮廓 在这篇文章中你能看到有关于 CSS 样式设置的常用属性,文章的目录如下: 1.背景 (1)背景颜色 可以使用 background-c ...

  9. 2022-07-10 第五小组 pan小堂 css学习笔记

    css学习笔记 什么是 CSS? CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作. ...

随机推荐

  1. vue、rollup、sass、requirejs组成的vueManager

    近段时间本人一直在思考如何基于vue搭建一个中后端管理系统的通用基础前端解决方案.思考的主要问题点如下: 如何使各个子业务模块的按需加载 css预处理方案的选择 如何引入现代的前端工程思想,也就是工程 ...

  2. 【wannacry病毒之暗网】-如何访问"暗网"（慎入）

    心里能力不强的人,请别看. 有些事情还是不要接触比较好, 社会最恶一面不是随随便便就能接触到的, 也不是你能理解的 你想要用暗网做什么是你考虑的一个问题 什么是暗网? 所谓的"暗网" ...

  3. 【JAVAWEB学习笔记】14_response

    HttpServletResponse 学习目标 案例一.完成文件下载 案例二.生成验证码(了解) 1．HttpServletResponse概述 我们在创建Servlet时会覆盖service()方 ...

  4. 在Excel上写程序(ExcelEx)

    首先要说明的是:Ctrl+D,是执行框选的的扩展函数+号,一个单元格里多个函数用+号分隔*号,相当于链式操作(没法子,公式里不能写"."号) 虽还有很大的局限性,至少很多小程序和数 ...

  5. 用app.net Core搞点多国语言网站

    Asp.net Core 中文文档很少,你可以看英文的,不过英文的也是说的有点乱.这篇文章是干货. 1. 配置好你的WebApplication,使他可以支持国际化语言,修改文档Startup.cs ...

  6. Nginx教程(二) Nginx虚拟主机配置

    Nginx教程(二) Nginx虚拟主机配置 1 虚拟主机管理 1.1 Nginx管理虚拟主机 虚拟主机使用的是特殊的软硬件技术,它把一台运行在因特网上的服务器主机分成一台台“虚拟”的主机,每台虚拟主 ...

  7. WinForm笔记

    Hi All, 分享一个学WinForm时的笔记: 1. 关键字 partial:是部分类,允许将一个类放在多个文件当中. 2. MessageBox()类相当于Console.WriteLine() ...

  8. Spark踩坑记——从RDD看集群调度

    [TOC] 前言 在Spark的使用中,性能的调优配置过程中,查阅了很多资料,之前自己总结过两篇小博文Spark踩坑记--初试和Spark踩坑记--数据库(Hbase+Mysql),第一篇概况的归纳了 ...

  9. kafka 0.10.2 消息生产者(producer)

    package cn.xiaojf.kafka.producer; import org.apache.kafka.clients.producer.*; import org.apache.kafk ...

  10. Libevent源码分析—event_set()

    初始化完event_base后,下面要初始化event,通过调用event_set()实现 .相关源码位于event.c event_set() void event_set(struct event ...