首页手记 CSS浮动入门教程：理解与应用

CSS浮动入门教程：理解与应用

标签：

Html/CSS

概述

本文详细介绍了CSS浮动的概念和基本语法，包括如何设置元素向左或向右浮动，并提供了多个示例代码以帮助理解。文章还探讨了浮动可能导致的高度塌陷问题及其解决方法，并介绍了使用Flexbox和Grid布局作为浮动的替代方案。

CSS浮动简介

浮动的概念

在CSS中，浮动（float）是一种布局方式，主要用于控制元素的位置，使其向左或向右移动，直到其边缘与包含它的容器或另一个浮动元素的边缘接触。浮动元素会脱离其正常的文档流，其父元素的高度可能不会包含浮动元素的高度，导致布局显示问题。

浮动的基本语法

float 属性可以应用于任何元素，但最常见的是应用于包含文本或图片的元素。具体使用方式如下：

/* 元素向左浮动 */
element {
    float: left;
}

/* 元素向右浮动 */
element {
    float: right;
}

/* 元素不浮动 */
element {
    float: none;
}

例如，我们可以将一个 <div> 元素设置为左浮动：

<!DOCTYPE html>
<html>
<head>
    <style>
        .float-left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="float-left">浮动元素</div>
</body>
</html>

以上代码中，.float-left 类设置为左浮动，并定义了宽度和高度以及背景颜色。

常见的浮动属性

float属性详解

float 属性常用的取值包括：

left: 元素向左浮动。
right: 元素向右浮动。
none: 元素不浮动，这是默认值。
inherit: 元素继承父元素的浮动值。

示例代码如下：

/* 横向浮动 */
.left-float {
    float: left;
    width: 50%;
    height: 100px;
    background-color: lightgreen;
}

.right-float {
    float: right;
    width: 50%;
    height: 100px;
    background-color: lightcoral;
}

/* 不浮动 */
.no-float {
    float: none;
    width: 50%;
    height: 100px;
    background-color: lightyellow;
}

<!DOCTYPE html>
<html>
<head>
    <style>
        .left-float {
            float: left;
            width: 50%;
            height: 100px;
            background-color: lightgreen;
        }

        .right-float {
            float: right;
            width: 50%;
            height: 100px;
            background-color: lightcoral;
        }

        .no-float {
            float: none;
            width: 50%;
            height: 100px;
            background-color: lightyellow;
        }
    </style>
</head>
<body>
    <div class="left-float">左浮动</div>
    <div class="right-float">右浮动</div>
    <div class="no-float">不浮动</div>
</body>
</html>

clear属性详解

clear 属性用于指定元素两侧不可出现浮动元素。常用的取值包括：

left: 不允许左侧出现浮动元素。
right: 不允许右侧出现浮动元素。
both: 不允许两侧出现浮动元素。
none: 不清浮动，这是默认值。
inherit: 继承父元素的值。

示例代码如下：

.clear-left {
    clear: left;
    width: 100px;
    height: 100px;
    background-color: lightblue;
}

.clear-right {
    clear: right;
    width: 100px;
    height: 100px;
    background-color: lightcoral;
}

.clear-both {
    clear: both;
    width: 100px;
    height: 100px;
    background-color: lightgreen;
}

.clear-none {
    clear: none;
    width: 100px;
    height: 100px;
    background-color: lightyellow;
}

<!DOCTYPE html>
<html>
<head>
    <style>
        .clear-left {
            clear: left;
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }

        .clear-right {
            clear: right;
            width: 100px;
            height: 100px;
            background-color: lightcoral;
        }

        .clear-both {
            clear: both;
            width: 100px;
            height: 100px;
            background-color: lightgreen;
        }

        .clear-none {
            clear: none;
            width: 100px;
            height: 100px;
            background-color: lightyellow;
        }
    </style>
</head>
<body>
    <div class="clear-left">不允许左侧浮动</div>
    <div class="clear-right">不允许右侧浮动</div>
    <div class="clear-both">不允许两侧浮动</div>
    <div class="clear-none">不清浮动</div>
</body>
</html>

浮动的实际应用

浮动布局的基本实现

浮动可以用于创建简单的布局，如两栏布局、三栏布局等。

两栏布局示例

<!DOCTYPE html>
<html>
<head>
    <style>
        .left-column {
            float: left;
            width: 50%;
            background-color: lightgreen;
        }

        .right-column {
            float: right;
            width: 50%;
            background-color: lightcoral;
        }

        .clearfix {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="left-column">左栏内容</div>
    <div class="right-column">右栏内容</div>
    <div class="clearfix"></div>
</body>
</html>

在这个示例中，两个 <div> 元素分别向左和向右浮动，形成一个两栏布局。由于浮动元素可能会导致父容器高度塌陷，因此通常需要在布局末尾添加一个清除浮动的元素，如上述代码中的 .clearfix 元素。

三栏布局示例

<!DOCTYPE html>
<html>
<head>
    <style>
        .left-column {
            float: left;
            width: 20%;
            background-color: lightgreen;
        }

        .right-column {
            float: right;
            width: 20%;
            background-color: lightcoral;
        }

        .center-column {
            margin-left: 20%;
            margin-right: 20%;
            background-color: lightblue;
        }

        .clearfix {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="left-column">左栏内容</div>
    <div class="right-column">右栏内容</div>
    <div class="center-column">中间栏内容</div>
    <div class="clearfix"></div>
</body>
</html>

在这个示例中，使用浮动来实现一个三栏布局。左栏和右栏元素分别设置为左浮动和右浮动，中间栏则通过设置左右外边距来对齐。

浮动在图片环绕文本中的应用

浮动可以用来实现图片环绕文本的效果，这在新闻网站或博客中非常常见。

<!DOCTYPE html>
<html>
<head>
    <style>
        .float-left {
            float: left;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="example.jpg" alt="示例图片" class="float-left">
    <p>这是一段示例文本。这段文本将会环绕图片。浮动的图片将会在文本的左侧，文本会自动环绕图片。</p>
</body>
</html>

在这个示例中，<img> 元素设置为左浮动，并且在文本旁边添加了适当的边距，使文本能够环绕图片。

浮动的常见问题

为什么使用浮动可能会导致父元素高度塌陷

当一个元素浮动后，它会脱离正常的文档流，导致父元素的高度不能包含浮动元素的高度。因此，如果父元素中包含浮动元素，父元素的高度可能会塌陷，导致浮动元素未能正确显示。

例如，以下代码中，父元素的高度并不会包含浮动元素的高度：

<!DOCTYPE html>
<html>
<head>
    <style>
        .parent {
            border: 1px solid black;
        }

        .child {
            float: left;
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">浮动元素</div>
    </div>
</body>
</html>

在这个示例中，父元素 <div> 中包含一个浮动的子元素 <div>。由于浮动元素脱离了文档流，父元素的高度将不会包含浮动元素的高度，导致父元素的边框高度不包含浮动元素的高度。

如何避免高度塌陷

要避免浮动导致的高度塌陷问题，可以使用以下几种方法：

使用clear属性清除浮动

通过在浮动元素之后添加一个清除浮动的元素，可以避免高度塌陷的问题。

<!DOCTYPE html>
<html>
<head>
    <style>
        .parent {
            border: 1px solid black;
        }

        .child {
            float: left;
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }

        .clearfix {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">浮动元素</div>
        <div class="clearfix"></div>
    </div>
</body>
</html>

在这个示例中，浮动元素后添加了一个清除浮动的元素 .clearfix，这样父元素的高度会包含浮动元素的高度。

使用clearfix类清除浮动

clearfix 类是一种常见的用于清除浮动的方法。它利用了 CSS 中的伪元素 ::after 来清除浮动。

<!DOCTYPE html>
<html>
<head>
    <style>
        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }

        .clearfix {
            zoom: 1;
        }

        .parent {
            border: 1px solid black;
        }

        .child {
            float: left;
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="parent clearfix">
        <div class="child">浮动元素</div>
    </div>
</body>
</html>

在这个示例中，使用了 ::after 伪元素和 zoom: 1; 来触发 IE6-7 下的 hasLayout，以实现清除浮动的效果。这样可以确保父元素的高度包含浮动元素的高度。

浮动的清除方法

使用clear属性清除浮动

clear 属性可以用来清除浮动。这个属性可以设置在浮动元素之后的元素上，以防止其两侧出现浮动元素。

<!DOCTYPE html>
<html>
<head>
    <style>
        .left-float {
            float: left;
            width: 300px;
            height: 200px;
            background-color: lightblue;
        }

        .clear-left {
            clear: left;
            width: 200px;
            height: 100px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="left-float">左浮动</div>
    <div class="clear-left">清除左浮动的元素</div>
</body>
</html>

在这个示例中，.clear-left 类设置了 clear: left;，使得其不会被左侧浮动的元素影响。

使用clearfix类清除浮动

clearfix 类是一种更通用的清除浮动的方法。它可以应用于包含浮动元素的父元素，从而避免高度塌陷的问题。

<!DOCTYPE html>
<html>
<head>
    <style>
        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }

        .clearfix {
            zoom: 1;
        }

        .parent {
            border: 1px solid black;
        }

        .child {
            float: left;
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="parent clearfix">
        <div class="child">浮动元素</div>
    </div>
</body>
</html>

在这个示例中，.clearfix 类利用 ::after 伪元素清除浮动，并通过 zoom: 1; 触发 hasLayout，从而避免高度塌陷的问题。

浮动的替代方案

相对于浮动的其他布局方法

除了浮动，还可以使用其他方法实现布局效果。例如，可以使用绝对定位或相对定位来实现相似的效果。

绝对定位示例

<!DOCTYPE html>
<html>
<head>
    <style>
        .position-absolute {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }

        .parent {
            position: relative;
            width: 500px;
            height: 500px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="position-absolute">绝对定位元素</div>
    </div>
</body>
</html>

在这个示例中，.position-absolute 类设置为绝对定位，使其相对于最近的非 static 类型的父元素定位。这种布局方式可以实现与浮动相似的效果，但需要精确控制元素的位置。

相对定位示例

<!DOCTYPE html>
<html>
<head>
    <style>
        .position-relative {
            position: relative;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }

        .parent {
            position: relative;
            width: 500px;
            height: 500px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="position-relative">相对定位元素</div>
    </div>
</body>
</html>

在这个示例中，.position-relative 类设置为相对定位，使其相对于自身正常位置偏移。这种布局方式也可以实现与浮动相似的效果，但同样需要精确控制元素的位置。

使用Flexbox和Grid布局替代浮动

现代CSS布局推荐使用 Flexbox 和 Grid 布局，这些布局方式不仅可以替代浮动，而且提供了更强大的布局能力。

Flexbox布局示例

<!DOCTYPE html>
<html>
<head>
    <style>
        .flex-container {
            display: flex;
            width: 100%;
            border: 1px solid black;
        }

        .flex-item {
            width: 50%;
            height: 100px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">左栏内容</div>
        <div class="flex-item">右栏内容</div>
    </div>
</body>
</html>

在这个示例中，使用了 display: flex; 来创建一个 Flexbox 容器，左右两个子元素分别占据容器的50%宽度。这种方式可以实现与浮动布局相似的效果，但更简单且更易控制。

Grid布局示例

<!DOCTYPE html>
<html>
<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            width: 100%;
            border: 1px solid black;
        }

        .grid-item {
            height: 100px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">左栏内容</div>
        <div class="grid-item">右栏内容</div>
    </div>
</body>
</html>

在这个示例中，使用了 display: grid; 来创建一个 Grid 容器，用 grid-template-columns 定义了两列布局。这种方式可以实现更复杂的布局效果，同样可以替代浮动布局。

总结，浮动虽然在一定程度上可以实现布局效果，但存在高度塌陷等问题。现代CSS提供了更强大的布局工具如 Flexbox 和 Grid，可以更灵活地控制布局，因此推荐使用这些工具来替代浮动布局。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

动漫人物

手记
篇

粉丝

18

获赞与收藏

71

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30936 346

网络编程入门教程

20个小节 12729 240

Pandas 入门教程

25个小节 18626 342

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

CSS浮动入门教程：理解与应用

浮动的概念

浮动的基本语法

float属性详解

clear属性详解

浮动布局的基本实现

两栏布局示例

三栏布局示例

浮动在图片环绕文本中的应用

为什么使用浮动可能会导致父元素高度塌陷

如何避免高度塌陷

使用clear属性清除浮动

使用clearfix类清除浮动

使用clear属性清除浮动

使用clearfix类清除浮动

相对于浮动的其他布局方法

绝对定位示例

相对定位示例

使用Flexbox和Grid布局替代浮动

Flexbox布局示例

Grid布局示例

阅读免费教程