前言：

CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动.

一.css浮动(float)
(1)html文档流

自窗体自上而下分成一行一行，并在每行中按从左到右的顺序排放元素。
(2)网页中大部分对象默认是占用文档流，也有一些对象是不占文档流的，比如表单中隐藏域。

当然我们也可以让占用文档流的元素转换成不占文档流，这就要用到CSS中属性position、float、display来控制。默认情况下，所有元素都处在文档流中，四种情况将使得元素离开文档流：浮动float、绝对定位absolute、相对定位fixed、元素不显示display:none，这种情况不占文档流的空间，而普通元素的位置基于文档流。（了解）浮动float用于设置标签的居左浮动和居右浮动，浮动后的元素不属于html文档流，需要用清除浮动把文档拽回到文档流中。

浮动值：

   left：向左浮动

   right：向右浮动

特征：

 块元素可以在一行显示

浮动特征：

1.按照一个指定的方向移动，遇到父级的边界或者其他的元素停下来

2.块元素可以在一行显示，宽由内容撑起来

3.行内元素支持设置宽高

4.脱离文档流  float不是完全脱离文档流的

    块元素 ：对于块元素，后面未浮动的元素所占的位置是浮动元素的位置

注意：内容会把浮动元素的位置保留，

   行内元素：行内元素会接着浮动元素显示，内容会形成环绕浮动元素的样子

5.造成父级塌陷(破坏性)

通过例子来解释浮动
1.页面上有两个块元素，每个块元素独占一行
2.我们希望它能并排显示，这时就可以使用float，我们先给红的div加float:left，发现两个是在 一行了，但是它们重叠在了一起
3.这是因为加了float的元素不但会消除独占一行的特性，而且还会“飘”在其它元素之上
4.我们为蓝色的div也加上float，这时正常了，两个div显示在一排

代码

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="utf-8" />

    <title>CSS浮动定位</title>

    <style>

        .d1{width:200px; height:200px; background:red; float: left; }

        .d2{width:300px; height:300px; background:blue;float: left;}

        /*.d3{width:500px; height:500px; background:green; clear:both;}*/

    </style>

</head>

<body>

    <div class="d1"></div>

    <div class="d2"></div>

    <!--<div class="d3"></div>-->

</body>

</html>

浮动的目的是使元素变为可在一行显示，且可设置宽和高的元素。它的作用类似于inline-block；只不过它是脱离了文档流了。

浮动的元素脱离文档流后，对块元素而言，从上向下的文档流中找不到浮动的元素，所以在浮动元素后加块元素，块元素会被覆盖掉。

.d1{ width:100px; height: 100px; background-color:red; float: left}

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

  .d3{ width:400px; height: 400px; background-color:green;}

        <div class="d1"></div>

        <div class="d2"></div>

        <div class="d3"></div>

浮动的元素脱离文档流后，这个浮动的块元素虽然脱离了文档流，但对它后面的行元素而言，从左至右的位置中，是要以这个浮动元素的位置开始的。

.d1{ width:100px; height: 100px; background-color:red; float: left}

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

    <div class="d1"></div>

<div class="d2"></div>

<a href="#">这是个不浮动的超级链接</a>

二、清除浮动
描述：清除浮动是在使用了浮动之后必不可少的，为了网站布局的效果，清除浮动也变得非常麻烦。
属性：clear
值：left、right、both
清除浮动的常用方式：
1.结尾处加空div标签 clear:both （或在下一个元素上加clear:both;）
2.父级div定义 伪元素:after
3.父级div定义 overflow:hidden

(1). 结尾处加空div标签 clear的方式清除浮动
a.刚才的例子已经完成了并排布局，这时我需要加第三个块元素，起名d3，这时发现，d3是被压在了前两个块之下
b.刚才说过，加了float的元素会飘在其它元素之上，实际上是因为它们已经不属于html正常的文档流了，后面再有多少个元素和它无关，它始终飘在上面
c.我们只是想让它不独占一行，并没有想让它不属于文档流。所以可以用clear:both把float元素拽回文档流。

用clear:both清除浮动代码

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="utf-8" />

    <title>CSS浮动定位</title>

    <style>

        .d1{width:200px; height:200px; background:red; float: left; }

        .d2{width:300px; height:300px; background:blue;float: left;}

        .d3{width:500px; height:500px; background:green; clear:both;}

    </style>

</head>

<body>

    <div class="d1"></div>

    <div class="d2"></div>

    <div class="d3"></div>

</body>

</html>

clear不只是both一个属性，它还有left和right，它们两个的作用是分别清除float的左浮动和右浮动。

<div class="d1"></div> 左浮动

<div class="d4"></div>    未浮动

<div class="d2"></div>    右浮动

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

<div class="d3"></div>

clear:both; 的正确使用方式：
1.加了clear:both的元素需要为块元素。这样clear:both才能清除块“从上而下”的文档流中被浮动的元素。
2.不要加在外层的div外面，如果这个外层div没有浮动，那这个clear:both是不起作用的。

.d1{ width:100px; height: 100px; background-color:red; float: left}

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

.d3{ width:400px; height: 400px; background-color:green;}

 .clear{clear: both;}

 <div class="divBox">

        <div class="d1"></div>

        <div class="d2"></div>

        <div class="d3"></div>

    </div>

    <div class="clear">这里加了一个清除浮动</div>  
 不起作用

(2).使用overflow:hidden清除浮动

.box{ overflow: hidden;}  //overflow:auto也是可以的

.left,.right{ width:100px; height: 100px; background:#388bff; float: left;}

    <div class="box">

        <div class="left"></div>

        <div class="right"></div>

    </div>

(3).使用伪元素清除浮动

after伪元素添加的内容默认为行内元素，所以需要设置display:block

.box::after{ content: " "; clear: both; display: block;}

.left,.right{ width:100px; height: 100px; background:#388bff; float: left;}

<div class="box">

        <div class="left"></div>

        <div class="right"></div>

</div>

使用浮动别忘记清除浮动,记住,无论现在浮动是否对你有影响,都要杨成良好的习惯,否则等后续修改代码的时候可能会影响整个布局。

上海尚学堂web前端培训原创，欢迎点击阅读其他web前端开发相关技术文章或者获取更多支持资料。

css浮动(float)及如何清除浮动的更多相关文章

  1. 【深入BFC】 关于CSS中float布局，清除浮动，和margin合并的原理解析，解开你心中的那些困惑！

    BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. ...

  2. float闭合（清除浮动）和CSS HACK

    一.float 闭合(清除浮动) 将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽. <style>.c ...

  3. css中的浮动与三种清除浮动的方法

    说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...

  4. 浮动（float）与清除浮动（clear）

    上一篇中我们了解了块级元素与内联元素,今天将自己查阅的资料整理写出来,与大家一起理解什么是浮动,以及怎样清除浮动,本文以div元素为例. 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮 ...

  5. css考核点整理（一）-浮动的理解和清除浮动的几种方式

    浮动的理解和清除浮动的几种方式 clear语法:clear : none | left | right | both 取值:none : 默认值.允许两边都可以有浮动对象left : 不允许左边有浮动 ...

  6. CSS基础（float属性与清除浮动）

    3.8 这是CSS里比较重要的属性:浮动,这个属性会在以后经常用到,算是一个重点吧 浮动 语法:float:left  |  right  |  none 特点: 浮动的元素不占位置,脱离了标准文档流 ...

  7. css中：overflow:hidden清除浮动的原理

    要想彻底清除浮动的影响,适合的属性不是 clear 而是 overflow. 一般使用 overflow:hidden,利用 BFC 的“结界”特性彻底解决浮动对外部或兄弟元素的影响. 1. 前言: ...

  8. 什么是BFC？ CSS 如何使用伪元素清除浮动？

    .BFC概念: 块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响. 我们先了解一个名词:BFC(block formatting c ...

  9. css中使用浮动的情况和清除浮动的方法

    1.使用浮动时出现的情况: (1)使块元素在一行显示 (2)使内嵌元素支持宽高 (3)不设置宽高的时候宽度由内容撑开 (4)换行不被解析(故使用行内元素的时候清除间隙的方法可以使用浮动) (5)元素添 ...

随机推荐

  1. HDFS 读/写数据流程

    1. HDFS 写数据流程 客户端通过 Distributed FileSystem 模块向 NameNode 请求上传文件, NameNode 检查目标文件是否已存在,父目录是否存在: NameNo ...

  2. Netty源码剖析-接受数据

    参考文献:极客时间傅健老师的<Netty源码剖析与实战>Talk is cheap.show me the code! ----主线:worker thread ①多路复用器(Select ...

  3. global和nonlocal的区别

    global可以在任何地方修饰变量,而且被global修饰的变量直接被标识为全局变量,对该变量修改会影响全局变量的值,但不影响函数中未被global修饰的同名变量(依然是局部变量),nonlocal只 ...

  4. 【AC自动机】Keywords Search

    [题目链接] https://loj.ac/problem/10057 [题意] 原题来自:HDU 2222 给定  n 个长度不超过 50 的由小写英文字母组成的单词准备查询,以及一篇长为 m 的文 ...

  5. android 自定义控件之NetWorkImageView 处理listview等控件中的图片加载乱序问题

    0.调用: BaseAdapter中设置方法 holder.iv.loadImage(url); adapter_xxx.xml 中 控件需要用 xxx.NetWorkImageView 1 NetW ...

  6. Spring在Thread中注入Bean无效的解决方式

    在Spring项目中,有时需要新开线程完成一些复杂任务,而线程中可能需要注入一些服务.而通过Spring注入来管理和使用服务是较为合理的方式.但是若直接在Thread子类中通过注解方式注入Bean是无 ...

  7. luogu4677山区建小学题解--区间DP

    题目链接 https://www.luogu.org/problemnew/show/P4677 分析 这道题方法跟之前题不一样,我们相当于枚举一个左右端点来线性扩展,同时划分断点进行决策 \(f[i ...

  8. js之数据类型（对象类型——单体内置对象——Math）

    Math是一个内置对象,它具有数学常数和函数的属性和方法.Math对象用于执行数学任务,和其它对象不同,Math只是一个静态对象并没有Math()构造函数,实际上,Math()只是一个由js设置的对象 ...

  9. bootstrap-selectpicker 插件事件

    $('#id').on('show.bs.select', function (e) { //绑定下拉显示列表触发事件 }); $('#id').on('hidden.bs.select', func ...

  10. 选择webpack这条路，我踩过的坑

    在http://www.jianshu.com/p/42e11515c10f这篇文章,我重新学习了一下webpack. 一.json文件里面不应该含有注释,否则会报错 本来我的json文件长这个样子: ...