前端基础：CSS 浮动(float)-普通流、浮动、定位、布局的综合搭配（重点）

曹莓奶昔

已于 2022-03-18 22:56:37 修改

阅读量656

点赞数

分类专栏： CSS 文章标签：前端 vscode css css3

于 2022-03-10 21:27:00 首次发布

本文链接：https://blog.csdn.net/weixin_49555741/article/details/123379318

版权

CSS 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

3.2 一个元素浮动，其他兄弟元素都要浮动

1. 常见的三种网页布局

传统的网页布局就是盒子的排序顺序，实际开发中，一个页面包含三种布局。

网页布局第一准则：多个块级元素纵向找标准流，多个块级元素横向找浮动。

1.1 普通流（普通流/文档流）

标准流就是按照默认方式排列，它是最基本的布局方式。

块级元素会独占一行 (例：div、hr、h1-h6、ul、ol、form、table标签)
行内元素从左到右按序排序，自动换行 (例：span、a、i、em标签)

1.2 浮动

float属性用于创建浮动框，将其移到浮动框的边缘。

1.2.1 作用:

实现多个块级元素div水平排列(最经典应用)
实现两个盒子左右对齐

语法: 选择器｛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>
        .cat {
            width: 200px;
            height: 50px;
            background-color: rgb(100, 231, 181);
            float: left;
            text-align: center;
            line-height: 50px;
        }

        .dog {
            width: 500px;
            height: 100px;
            background-color: rgb(241, 116, 175);
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>

<body>
    <div class="cat">cat</div>
    <div class="dog">dog</div>
</body>

</html>

1.2.2 浮动特性（重点）

会脱离标准流（脱标）难点（图1所示）

注：浮动盒子不保留原先位置，他会重叠在元素上（类似图层）

一行内显示并元素顶部对齐（图2所示）

注: 浮动的元素是互相贴在一起的(无缝隙)，一行放不下会换行对齐排列

具有行内块元素的特性

注：任何元素都可浮动，加了浮动都有行内元素的特性。

如果块级元素无宽度，默认为父级宽度，但是设浮动后，宽度又内容决定。

1.3 定位

2.布局的搭配使用

2.1 浮动元素和标准流父级搭配（常用）

根据网页布局第一原则，先用标准流的父级排列上下位置，后用内部元素浮动排列左右位置去。

3. 浮动综合练习-小米手机模块

网页布局第二准则：先设置盒子大小，后设置盒子位置

<!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>小米手机布局练习</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        .box {
            width: 1780px;
            height: 900px;
            background-color: #f5f5f5;
        }

        .box .left {
            float: left;
            width: 438px;
        }

        .box .left a img {
            float: right;
        }

        .right li {
            width: 314px;
            height: 402px;
            float: left;
            margin-left: 20px;
            margin-bottom: 20px;
        }

        li {
            list-style: none;
        }

        li :hover {
            box-shadow: 10px 10px 20px 20px rgba(0, 0, 0, 0.05);
        }

        .left :hover {
            box-shadow: 10px 10px 20px 20px rgba(0, 0, 0, 0.05);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">
            <a href="#">
                <img src="images/3.0.png">
            </a>
        </div>
        <ol class="right">
            <li>
                <a href="#">
                    <img src="images/3.1.png">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/3.2.png">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/3.3.png">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/3.4.png">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/3.5.png">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/3.6.png">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/3.7.png">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/3.8.png">
                </a>
            </li>
        </ol>
    </div>
</body>

</html>

效果图下：