从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. 神经网络结构在命名实体识别（NER）中的应用

    神经网络结构在命名实体识别(NER)中的应用 近年来,基于神经网络的深度学习方法在自然语言处理领域已经取得了不少进展.作为NLP领域的基础任务-命名实体识别(Named Entity Recognit ...

  2. 简易RPC框架-学习使用

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  3. 华为路由器AR1220F-S的端口映射NAT配置（拨号光纤上网）

    telnet 登录 或者ssh登录路由器 //进入系统试图界面 sys-view //第一步. 添加acl规则, 允许内网本身访问对外的公网ip. 否则,只能外部人员访问你的公网ip [Huawei] ...

  4. 18个你可能不相信是用CSS制作出来的东西

    与流行的看法相反,CSS不仅仅是用来提供一个WEB页面的基本风格,以使它看起来更有吸引力.还有很多其他的事情,CSS也可以做的很好.由于它创建动画和交互的能力,CSS集合HTML以及JavaScrip ...

  5. LeetCode---------Longest Substring Without Repeating Characters解法

    题目如下: Given a string, find the length of the longest substring without repeating characters. Example ...

  6. Day5模块-os和sys模块

    os模块:操作系统调用的接口 ------------------------------------------------------------------------------------- ...

  7. .Net程序员学用Oracle系列(28)：PLSQL 之SQL分类和动态SQL

    1.SQL 语句分类 1.1.分类方法及类型 1.2.数据定义语言 1.3.数据操纵语言 1.4.其它语句 2.动态 SQL 理论 2.1.动态 SQL 的用途 2.2.动态 SQL 的语法 2.3. ...

  8. 使用nodejs爬前程无忧前端技能排行（半半成品）

    最近准备换工作,需要更新一下技能树.为做到有的放矢,想对招聘方的要求做个统计.正好之前了解过nodejs,所以做了个爬虫搜索数据. 具体步骤: 1．  先用fiddler分析请求需要的header和b ...

  9. Regular Expression Matching2015年6月24日

    题目: Implement regular expression matching with support for '.' and '*'. '.' Matches any single chara ...

  10. 基于Redis实现分布式锁(1)

    转自:http://blog.csdn.net/ugg/article/details/41894947 背景在很多互联网产品应用中,有些场景需要加锁处理,比如:秒杀,全局递增ID,楼层生成等等.大部 ...