「CSS」1分钟了解经典样式-浮动

动元素添加了flow属性，会被移出正常文档流，并被拉到文档的边缘，文档流重新排列并包围它所在的空间。在报纸和杂志很常见，所以css增加了浮动来实现这种效果，这是浮动设计的初衷。

浮动本身并不是为了实现布局而设计的，但在近20年时间里被当成布局工具。是因为那个年代它是唯一的选择，flexbox和网格布局近几年才出现。

浮动元素不同于普通文档流元素，它们的高度不会添加到父元素。容器折叠是指父容器并没有包含到浮动的容器，因为浮动的元素高度不会加到父容器上。

如何解决容器折叠的问题

使用和浮动float配套的clear属性。将一个元素放置到父容器的末尾，并对它使用clear: both，元素将移动到浮动元素的下面，而不是侧面。容器就会扩展包含它。更加优雅的做法，是使用伪元素。这一做法称为清除浮动。

.clear::after { // 选中容器末尾的伪元素
content: ' '
clear: both // 清除浮动
display: block // display非inline，clear只对块级元素生效，加上content属性，使得伪元素出现在文档中
}

浮动元素的外边距不会折叠到容器外，而非浮动元素外边距则会折叠。为了包含所有外边距，清除浮动修改版如下。

.clear::after,
.clear::before { // 选中容器开始和末尾的伪元素
content: ' '
display: table // table可以包含外边距
}
.clear::after { // 只有末尾需要清除浮动
clear: both // 清除浮动
}

有一种典型网页布局，左边是图片，右边是文字，称为媒体对象模式。实现方案有很多种，可以用flexbox和网格布局等，这里讲下如何用浮动实现。

对图片设置浮动到左边，右边文字会围绕图片，可能会到图片的底下。但是我们预期是文字在图片右侧排列，不会到图片底部。

使用块级格式化上下文（block formatting context, BFC）解决。BFC里面的内容不会和外部元素重叠或相互影响。添加如下元素可以创建

●float: left, right，不为none即可

●overflow: auto, hidden, scroll，不为visible即可

●display: inline-block, table-cell, flex, grid。有这些属性的元素是块级容器

●position: absolute或fixed

通常采取设置overflow: hidden或auto，是创建BFC最简单的方式。

以上就是今天和大家分享的浮动核心知识，希望能让你更好的理解界面样式。喜欢的朋友可以点赞，关注加收藏，互相学习，共同成长！

节课介绍CSS的浮动。

标准流

标签按照规定好的默认方式排序
块级元素独占一行 从上向下顺序排列
div hr p h1-h6 ul ol form table

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        div {
            color: bisque;
            width: 300px;
            background-color: #c5708b;
        }

        h2 {
            color: #1677b3;
            width: 300px;
            background-color: #5698c3;
        }
    </style>
</head>

<body>
    <div>我是div</div>
    <h2>我是h2</h2>
</body>

</html>

为什么需要浮动嘞?

很多的布局效果,标准流没有办法完成,就需要利用到浮动完成布局.

浮动可以改变元素标签默认的排列方式

网页布局第一准则:

多个块级元素纵向排列找标准流

多个块级元素横向排列找浮动

⚾ 什么是浮动?⚾

float 属性用于创建浮动框
将其移动到一边,直到左边缘或者右边缘及包含块或者另一个浮动框的边缘

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        div {
            color: bisque;
            width: 200px;
            background-color: #c5708b;
            /* left 左浮动 right 右浮动 none 不浮动(默认) */
            float: left;
        }

        h2 {
            color: #1677b3;
            width: 300px;
            background-color: #5698c3;
        }
    </style>
</head>

<body>
    <div>我是div</div>
    <h2>我是h2</h2>
</body>

</html>

浮动特性

1.脱离标准普通流的控制移动到指定位置脱标

2.浮动的盒子不再保留原先的位置

3.多个盒子都设置浮动,按照属性值一行并排顶端对齐排列(不会有缝隙,多出另起一行对齐)

4.浮动元素会具有行内块元素特性(任何元素都可浮动)

如果块级盒子没有设置宽度,默认宽度和父级一样宽,添加浮动后,大小由内容决定
行内元素同理

5.浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流

实战小技巧

为了约束浮动元素位置,网页布局一般采用的策略:先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置

清除浮动

为什么要清除浮动?

由于父级盒子很多情况下,不方便给高度,但是的盒子浮动又不占位置,最后父级盒子高度为0时,就会影响下面的标准流盒子.

1.父级没有高度

2.子盒子浮动了

3.影响下面布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .father {
            border: 4px solid #000;
        }
        div .child {
            color: bisque;
            width: 200px;
            background-color: #c5708b;
            float: left;
        }

    </style>
</head>

<body>
    <div class="father">
        <div class="child">我是div01</div>
        <div class="child">我是div02</div>
    </div>
</body>

</html>

清除浮动方法

清除浮动本质:

清除浮动元素脱离标准流造成的影响

清除浮动策略:

闭合浮动,只让浮动在父盒子内影响,不影响父盒子外面的其他盒子

1. 父级添加overflow 属性值设置hidden auto scroll

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .father {
            border: 4px solid greenyellow;
            overflow: hidden;
        }
        div .child {
            color: bisque;
            width: 200px;
            background-color: #c5708b;
            float: left;
        }

    </style>
</head>

<body>
    <div class="father">
        <div class="child">我是div01</div>
        <div class="child">我是div02</div>
    </div>
</body>

</html>

弊端:无法显示溢出的部分

父盒子 500px 子盒子 600px (子盒子的100px被隐藏)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .father {
            border: 4px solid greenyellow;
            width: 500px;
            overflow: hidden;
        }
        div .child {
            color: bisque;
            width: 600px;
            background-color: #c5708b;
            float: left;
        }

    </style>
</head>

<body>
    <div class="father">
        <div class="child">我是div01</div>
        <div class="child">我是div02</div>
    </div>
</body>

</html>

2.:after 伪元素法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .father {
            border: 4px solid greenyellow;
            width: 500px;
        }

        div .child {
            color: bisque;
            width: 240px;
            background-color: #c5708b;
            float: left;
        }

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

        .clearfix {
            /* IE 6,7专有 解决兼容性问题 */
            *zoom: 1;
        }
    </style>
</head>

<body>
    <div class="father clearfix">
        <div class="child">我是div01</div>
        <div class="child">我是div02</div>
    </div>
</body>

</html>

3.双伪元素清除浮动

在线咨询

上一篇：13 个最受欢迎的技术写作工具
下一篇：html+css带你制作网页水波特效

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商