美文网首页
CSS入门12-浮动与清除浮动

CSS入门12-浮动与清除浮动

作者: love丁酥酥 | 来源:发表于2018-01-25 00:35 被阅读75次

（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）
（注2：更多内容请查看我的目录。）

1.浮动的定义

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

2. 浮动的特征

2.1 脱标性

浮动元素会脱离标准文档流，根据属性向左或右浮动，使周围元素重新排列。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.1-1</title>
    <style>
        .div1 {
            background-color: green;
        }
        .div2 {
            width: 90px;
            height: 50px;
            background-color: yellow;
        }
        .div3 {
            width: 60px;
            height: 30px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
</html>
2.1-1

标准文档流如上图所示，块级元素从上往下排列。我们试着为其加上浮动属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.1-2</title>
    <style>
        .div1 {
            background-color: green;
        }
        .div2 {
            width: 90px;
            height: 50px;
            background-color: yellow;
        }
        .div3 {
            width: 60px;
            height: 30px;
            background-color: red;
        }
        .fl {
            float: left;
        }
    </style>
</head>
<body>
<div class="div1 fl">div1</div>
<div class="div2 fl">div2</div>
<div class="div3 fl">div3</div>
</body>
</html>
2.1-2

可以看到，元素向左漂浮，宽高可以指定，若不指定，默认包裹其元素内容。再来看下，浮动元素对标准文档流元素的影响。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.1-3</title>
    <style>
        .div1 {
            background-color: green;
        }
        .div2 {
            width: 90px;
            height: 50px;
            background-color: yellow;
        }
        .div3 {
            width: 60px;
            height: 30px;
            background-color: red;
        }
        .fl {
            float: left;
        }
    </style>
</head>
<body>
<div>
    <div class="div1">div1</div>
    <div class="div2 fl">div2</div>
    <div class="div3">div3</div>
</div>

</body>
</html>
2.1-3

可以看到，div3不是红色，而且检查div3的元素时发现其真实位置竟然在被div2覆盖的地方。那么如果将div2向右浮动呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.1-4</title>
    <style>
        .div1 {
            background-color: green;
        }
        .div2 {
            width: 90px;
            height: 50px;
            background-color: yellow;
        }
        .div3 {
            width: 60px;
            height: 30px;
            background-color: red;
        }
        .fr {
            float: right;
        }
    </style>
</head>
<body>
<div>
    <div class="div1">div1</div>
    <div class="div2 fr">div2</div>
    <div class="div3">div3</div>
</div>

</body>
</html>
2.1-4

可以看得更明显，div2其实是脱离标准文档流以后覆盖了div3。

2.2 宽高对浮动的影响

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.2-1</title>
    <style>
        .div1 {
            width: 70px;
            height: 50px;
            background-color: green;
        }
        .div2 {
            width: 90px;
            height: 80px;
            background-color: yellow;
        }
        .div3 {
            width: 60px;
            height: 30px;
            background-color: red;
        }
        .div4{
            width: 90px;
            height: 100px;
            background-color: blue;
        }
        .fl {
            float: left;
        }
    </style>
</head>
<body>
<div>
    <div class="div1 fl">div1</div>
    <div class="div2 fl">div2</div>
    <div class="div3 fl">div3</div>
    <div class="div4 fl">div4</div>
</div>

</body>
</html>
2.2-1
2.2-2
2.2-3
2.2-4
2.2-5
2.2-6

我们逐步将视窗宽度变小，可以发现，向左浮动时，当宽度不够时，最右边的盒子会向下挪到挨着左边最突出的元素或者直到父元素边框。

2.3 文字环绕

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.3</title>
<style>
div {
background-color: green;
}
.fl {
float: left;
}
.text {
word-break: break-all;
}
</style>
</head>
<body>
<div>
<img src="2.3.png" alt="" class="fl">
<div class="text">111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
</div>
</body>
</html>


2.3

2.4 高度坍塌

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.4</title>
    <style>
        .outer {
            border: 3px solid black;
        }
        .div1 {
            width: 70px;
            height: 50px;
            background-color: green;
        }
        .div2 {
            width: 90px;
            height: 80px;
            background-color: yellow;
        }
        .div3 {
            width: 60px;
            height: 30px;
            background-color: red;
        }
        .fl {
            float: left;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="div1 fl">div1</div>
    <div class="div2 fl">div2</div>
    <div class="div3 fl">div3</div>
</div>
</body>
</html>
2.4
如图所示，浮动的元素并不会撑起其父元素的高度。这是怎么回事呢？我们会在BFC中进行解释。

3. 清除浮动

清除浮动，总体上来说，有两种思路：

  1. 利用clear属性
  2. 利用BFC特性

下面来看一下两种思路各有哪些具体实现方案。

3.1 利用clear属性

3.1.1 直接使用clear属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.1.1</title>
    <style>
        .outer {
            border: 3px solid black;
        }
        .div1 {
            width: 70px;
            height: 50px;
            background-color: green;
        }
        .div2 {
            width: 90px;
            height: 80px;
            background-color: yellow;
        }
        .div3 {
            width: 60px;
            height: 30px;
            background-color: red;
        }
        .fl {
            float: left;
        }
        .clear {
            clear: left;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="div1 fl">div1</div>
    <div class="div2 fl">div2</div>
    <div class="div3">div3</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="outer">
    <div class="div1 fl">div1</div>
    <div class="div2 fl">div2</div>
    <div class="div3 clear">div3</div>
</div>
</body>
</html>
3.1.1

可以看到，如果需要清除浮动的元素与浮动元素同级，可以直接在需要清除浮动的元素上添加clear属性。

3.1.2 额外标签清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.1.1</title>
    <style>
        .outer {
            border: 3px solid black;
        }
        .div1 {
            width: 70px;
            height: 50px;
            background-color: green;
        }
        .div2 {
            width: 90px;
            height: 80px;
            background-color: yellow;
        }
        .div3 {
            width: 60px;
            height: 30px;
            background-color: red;
        }
        .fl {
            float: left;
        }
        .clear {
            clear: left;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="div1 fl">div1</div>
    <div class="div2 fl">div2</div>
</div>
<div class="div3">div3</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="outer">
    <div class="div1 fl">div1</div>
    <div class="div2 fl">div2</div>
</div>
<div class="div3 clear">div3</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="outer">
    <div class="div1 fl">div1</div>
    <div class="div2 fl">div2</div>
    <div class="clear"></div>
</div>
<div class="div3">div3</div>
</body>
</html>
3.1.2

可以看到，不同级的外部元素想要清除浮动影响，如果使用直接添加clear的方法，无法解决浮动元素的高度坍塌问题。可以在需要清楚浮动的末尾添加一个空标签，用来清除浮动。

3.1.3 :before，:after伪类清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.1.3</title>
    <style>
        .outer {
            border: 3px solid black;
        }
        .div1 {
            width: 70px;
            height: 50px;
            background-color: green;
        }
        .div2 {
            width: 90px;
            height: 80px;
            background-color: yellow;
        }
        .div3 {
            width: 60px;
            height: 30px;
            background-color: red;
        }
        .fl {
            float: left;
        }
        .clearfix {
            zoom: 1;
        }
        .clearfix:after{
            content: '';
            display: block;
            clear: both;
            visibility: hidden;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="div1 fl">div1</div>
    <div class="div2 fl">div2</div>
</div>
<div class="div3">div3</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="outer clearfix">
    <div class="div1 fl">div1</div>
    <div class="div2 fl">div2</div>
</div>
<div class="div3">div3</div>
</body>
</html>
3.1.3

其实原理上和添加空标签类似。有几点需要注意：

  1. zoom:1是为了兼容性，因为ie6/7不能使用伪类。
  2. content:' . '；display:block; 对于FF/Chrome/opera/IE8不能缺少，其中content()取值也可以为空。
  3. visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清除浮动。

这种方法是兼容性最好，后续影响也是最小的。下面提供CSS中的浮动和清除浮动，梳理一下！一文归纳的该方法：

// 现代浏览器clearfix方案，不支持IE6/7
.clearfix:after {
    display: table;
    content: " ";
    clear: both;
}

// 全浏览器通用的clearfix方案
// 引入了zoom以支持IE6/7
.clearfix:after {
    display: table;
    content: " ";
    clear: both;
}
.clearfix{
    *zoom: 1;
}

// 全浏览器通用的clearfix方案【推荐】
// 引入了zoom以支持IE6/7
// 同时加入:before以解决现代浏览器上边距折叠的问题
.clearfix:before,
.clearfix:after {
    display: table;
    content: " ";
}
.clearfix:after {
    clear: both;
}
.clearfix{
    *zoom: 1;
}

3.2 利用BFC特性

为父元素添加以下属性来触发BFC：

  • float 为 left | right
  • overflow 为 hidden | auto | scorll
  • display 为 table-cell | table-caption | inline-block | flex | inline-flex
  • position 为 absolute | fixed

可以给父元素设置overflow:auto来简单地实现BFC清除浮动，但是为了兼容IE最好用overflow:hidden。不过这样元素阴影或下拉菜单会被截断，比较局限。下面选取前两种方法来看一下效果。

3.2.1 使父元素浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.2.1</title>
    <style>
        .outer {
            border: 3px solid black;
        }
        .div1 {
            width: 70px;
            height: 50px;
            background-color: green;
        }
        .div2 {
            width: 90px;
            height: 80px;
            background-color: yellow;
        }
        .div3 {
            width: 60px;
            height: 30px;
            background-color: red;
        }
        .fl {
            float: left;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="div1 fl">div1</div>
    <div class="div2 fl">div2</div>
</div>
<div class="div3">div3</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="outer fl">
    <div class="div1 fl">div1</div>
    <div class="div2 fl">div2</div>
</div>
<div class="div3">div3</div>
</body>
</html>
3.2.1

这种方法，以暴制暴，父元素变成浮动以后同样需要考虑其影响和清除。

3.2.2 父元素添加属性overflow:hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.2.2</title>
    <style>
        .outer {
            border: 3px solid black;
        }
        .div1 {
            width: 70px;
            height: 50px;
            background-color: green;
        }
        .div2 {
            width: 90px;
            height: 80px;
            background-color: yellow;
        }
        .div3 {
            width: 60px;
            height: 30px;
            background-color: red;
        }
        .fl {
            float: left;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="div1 fl">div1</div>
    <div class="div2 fl">div2</div>
</div>
<div class="div3">div3</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="outer" style="overflow: hidden">
    <div class="div1 fl">div1</div>
    <div class="div2 fl">div2</div>
</div>
<div class="div3">div3</div>
</body>
</html>
3.2.2

4. 浮动的应用场景

  1. 文字环绕
    这是浮动设计的初衷。
  2. 多列布局
    常用的多列布局，更推荐使用inline-block，当然要注意列之间的空隙。但浮动也经常用于左边有一块固定宽度，右边根据父元素宽度自适应的情况。
  3. 菜单栏
    同样可以使用浮动或者inline-block实现。

参考

W3cSchool
CSS浮动float详解
CSS清浮动处理（Clear与BFC）
CSS中的浮动和清除浮动，梳理一下！
CSS篇之2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法
CSS复习笔记二：浮动和清除浮动
彻底理解浮动float CSS浮动详解 清除浮动的方法
经验分享：CSS浮动(float,clear)通俗讲解
清除浮动float (:after方法)
伪类:after清除浮动的原理和方法

相关文章

  • CSS入门12-浮动与清除浮动

    （注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）（注2：更多内容请查看我的目录。） ...

  • CSS浮动与清除浮动

    一、CSS浮动 1、三个固定宽度与高度的框，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包...

  • css浮动与清除浮动

    css浮动（float：none | left | right）在网页布局中我们经常使用的属性，也是经常会出现Bu...

  • CSS 浮动与清除浮动

    一、浮动 1、浮动的元素会脱标，漂浮在标准文档流之上。2、只能向左或向右浮动。3、不管是块级元素还是行内元素，一旦...

  • 清除浮动

    一、清除浮动 or 闭合浮动 ？ 清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：lef...

  • 如何理解css浮动以及清除浮动

    偶然间在博客园看到一篇非常棒的讲解浮动与清除浮动原理的文章 This is CSS清除浮动 link.

  • CSS 中的浮动

    浮动的定义： 元素脱离文档流 举栗子： 修改 CSS 代码，清除浮动： 浮动的影响： 父元素高度塌陷 清除浮动： ...

  • 一篇文章带你了解CSS clear both清除浮动

    一、前言 CSS clear both清除产生浮动 ，使用了css float浮动会产生css浮动，这个时候就需要...

  • CSS浮动续

    CSS清除浮动案例 CSS版心居中显示案例 清除浮动的四种用法： 1. 使用空标记清除浮动，隔墙法，增加标签 2....

  • CSS clear both清除浮动

    原文地址：CSS clear both清除浮动 DIV+CSS clear both清除产生浮动我们知道有时使用了...

网友评论

      本文标题：CSS入门12-浮动与清除浮动

      本文链接：https://www.haomeiwen.com/subject/abpbgxtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|CSS入门12-浮动与清除浮动|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！