【HTML+CSS学习笔记】浮动简介

最新推荐文章于 2024-07-03 16:58:30 发布

NEUMANN2077

最新推荐文章于 2024-07-03 16:58:30 发布

阅读量114

点赞数

分类专栏： HTML+CSS学习笔记文章标签： css html html5

本文链接：https://blog.csdn.net/m0_47746932/article/details/120496962

版权

HTML+CSS学习笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的float属性，用于使元素向左或向右浮动，实现水平排列。通过浮动，元素脱离文档流，但不会超过前面的浮动元素。文章通过实例展示了如何调整元素的浮动来改变布局，并探讨了浮动元素的特性，包括不会超过上边浮动元素的高度。此外，还讨论了如何通过浮动元素来创建水平排列的效果。

摘要由CSDN通过智能技术生成

浮动

通过浮动可以使得一个元素向其父元素的左侧或者右侧移动，使用float属性设置元素的浮动。主要作用：让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局。

可选值：
none 默认值，元素不浮动
left 元素向左浮动
right 元素向右浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

注意：元素设置浮动以后，水平布局的等式便不需要强制成立
没有加上float属性之前：

.box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }

请添加图片描述

加上了float属性之后：

        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            float: right;
        }

加上了float属性之后
下面考虑以下代码的实现场景：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

请添加图片描述
在这里，由于上面绿色的元素存在不可见的外边距(该外边距margin-right属性，是水平布局等式强制成立之后的结果)，所以下面的橙色元素不能到绿色元素的右边，在这里我们调整代码，尝试将橙色元素调整到绿色元素的右边。
注意：元素设置浮动之后会完全从文档流中脱离，不再占用文档流的位置，要小心元素下面还在文档流中的元素自动向上面移动。

CSS中样式如果这样设置，那么位于绿色元素下方的橙色元素会自动上移动。

        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            float: left;
        }

        .box2{
            width: 300px;
            height: 300px;
            background-color: orange;
        }

造成结果如下：
请添加图片描述
为了达到水平排列的效果，我们应该让box2元素（橙色元素）也浮动。
CSS样式设置如下：

        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            float: left;
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: orange;
            float:left;
        }

效果：
请添加图片描述
浮动的特点:

浮动的元素会完全脱离文档流，不再占据文档流中的位置(漂浮在上面)
设置浮动以后，元素会向父元素的右侧或者左侧移动
浮动元素默认不会从父元素中移出
浮动元素向左或向右移动时不会超过它前面的浮动元素
如果浮动元素上边是一个没有浮动的块元素，则浮动元素无法上移
浮动元素不会超过它上边浮动的兄弟元素，最多就是和他一样高(垂直方面)

关于浮动元素第 6 个特点的演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 400px;
            height: 200px;
            background-color: #bfa;
            float: left;
        }

        .box2{
            width: 400px;
            height: 200px;
            background-color: orange;
            float:left;
        }

        .box3{
            width: 200px;
            height: 200px;
            background-color: yellow;
            float: right;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

在这里，即使box3(黄色元素)上面存在空间，box3在垂直方向的位置也不会超过它前面的box2(橙色元素)。
请添加图片描述
在这里，如果交换box2和box3的位置，那么box3就可以移动到box1的右边。

<body>
    <div class="box1"></div>
    <div class="box3"></div>
    <div class="box2"></div>
</body>

请添加图片描述

NEUMANN2077

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录