CSS | 浮动-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_55483876/article/details/141219808

下一篇持续更新中… 如有错误欢迎指正！！！

文章目录

前言
- 学习目标
- 学习内容
1. 浮动
2. 常见网页布局
4 PS切图（选择观看）

前言

学习目标

在这里插入图片描述

学习内容

在这里插入图片描述

1. 浮动

1.1 传统网页布局的3种方式

在这里插入图片描述

标准流（普通流 / 文档流）

在这里插入图片描述

1.2 为什么需要浮动？

在这里插入图片描述

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

1.3 什么是浮动？

Float属性，用于创建浮动框，将其移动到一边，直到，左边缘或右边缘触及，包含块或另一个浮动框的边缘。
在这里插入图片描述

1.4 浮动特性（重难点）

加了浮动之后的元素，会具有很多特性，需要我们掌握的。

（1）浮动元素会脱离标准流（脱标）

在这里插入图片描述

（2）浮动元素会一行内显示，并且元素顶部对齐

在这里插入图片描述

（3）浮动元素会具有行内块元素的特性

在这里插入图片描述

浮动元素经常和标准流父级搭配使用

在这里插入图片描述

2. 常见网页布局

2.1 常见网页布局

在这里插入图片描述


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>常见网页布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .top {
            height: 50px;
            background-color: gray;
        }

        .banner {
            width: 980px;
            height: 150px;
            background-color: gray;
            margin: 10px auto;
        }

        .box {
            width: 980px;
            margin: 0 auto;
            height: 300px;
            background-color: pink;
        }

        .box li {
            float: left;
            width: 237px;
            height: 300px;
            background-color: gray;
            margin-right: 10px;
        }

        .box .last {
            margin-right: 0;
        }

        /* 只要是通栏的盒子(和浏览器一样宽) 不需要指定宽度 */
        .footer {
            height: 200px;
            background-color: gray;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
        </ul>
    </div>
    <div class="footer">footer</div>
</body>

</html>

2.2 浮动布局注意点

2.2.1 浮动和标准流的父盒子搭配
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。
2.2.2 一个元素浮动了，理论上其余的兄弟元素也要浮动
一个盒子，里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。