CSS float浮动布局与案例讲解

时间:2023-03-23
类别:教程 - 网页设计

传统网页布局的三种方式:浮动、定位、标准流(普通流/文档流)。

所谓的标准流,就是标签按照规定好的默认方式排列。例如:

块级元素会独占一行,从上往下顺序排列

常用块级元素:div,hr,p,h1-h6,ul,ol,form,table

行内元素会按照顺序从左到右顺序排列,碰到父元素边缘则自动换行。

常用行内元素:span,a,i,em

注意:实际开发中,一个页面基本都包含这三种布局方式(移动端会有新的布局方式)

为什么需要浮动

提问:如何实现一行多个块级元素(如多个div)并列?

如何实现页面左右两个块级元素的对齐?

总结:有很多布局效果标准流无法完成,但是浮动可以解决,因为浮动可以改变标签默认的排列方式。其中浮动最典型的应用就是让多个块级元素一行内并排。

网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。

什么是浮动

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

        .left {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            float: left;
        }
 
        .right {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
        }
    <div class="left">
        左边
    </div>
    <div class="right">
        右边
    </div>
CSS_float浮动布局与案例讲解 图1 

浮动的特性

脱离标准流的控制(脱标),浮动的盒子不再保留原先的位置,所以它的位置会被占用,下面的代码将第一个盒子设置为浮动,而第二个盒子没有设置浮动,所以第二个盒子会网上走占据第一个盒子的位置,导致两者重叠了。

CSS_float浮动布局与案例讲解 图2

如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并且顶端对齐排列。

<!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>
        .left {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            float: left;
        }
 
        .right {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left
        }
 
        .middle {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            float: left;
        }
    </style>
</head>
 
<body>
    <div class="left">
        左边
    </div>
    <div class="middle">
        中间
    </div>
    <div class="right">
        右边
    </div>
</body>
 
</html>

CSS_float浮动布局与案例讲解 图3

注意:浮动的元素是紧贴在一起的,不会有缝隙。如果父级宽度装不下这些浮动的盒子,多出的盒子则会另起一行。

浮动元素会具有行内块元素特性

例如span作为行内元素原本没有宽高(需要转换为行内块元素),但是若给他添加浮动,则不需要转换成行内块元素。

    <style>
        span,
        div {
            float: left;
            width: 200px;
            height: 100px;
            background-color: pink;
        }
 
        p {
            height: 15 0px;
            background-color: aqua;
            float: right;
        }
    </style>
    <span>1</span>
    <div>2</div>
    <p>pppb</p>
注意:如果块级盒子没有设置宽度,则默认宽度和父级一样宽。但是添加浮动后,它的大小根据内容来决定。

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

为了约束浮动元素位置,我们一般先用标准流的父级排列上下位置,之后内部子元素采取浮动排列左右位置,这也符合网页布局第一准则。

CSS_float浮动布局与案例讲解 图4

三个浮动布局案例——小米商城

下面我们来实现如图的案例

CSS_float浮动布局与案例讲解 图5

<style>
    * {
        margin: 0;
        padding: 0;
    }
 
    .box {
        height: 460px;
        width: 1200px;
        background-color: pink;
        margin: 0 auto;
        background-color: aqua;
    }
 
    .left {
        width: 230px;
        height: 460px;
        float: left;
        background-color: purple;
    }
 
    .right {
        width: 970px;
        height: 460px;
        float: right;
    }
</style>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>

CSS_float浮动布局与案例讲解 图6

再来实现这个,每个小盒子中间有一些空格

CSS_float浮动布局与案例讲解 图7

    <style>
        * {
            margin: 0;
            padding: 0;
 
        }
 
        li {
            list-style: none;
        }
 
        .box {
            width: 1226px;
            height: 285px;
            margin: 0 auto;
            background-color: pink;
        }
 
        .box li {
            width: 296px;
            float: left;
            height: 285px;
            background-color: darkgray;
            margin-right: 14px;
        }
 
        /* 注意权重问题 */
        .box .last {
            margin-right: 0;
        }
    </style>
    <ul class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li class="last">4</li>
    </ul>
CSS_float浮动布局与案例讲解 图8

最后再做一个手机模块的案例

CSS_float浮动布局与案例讲解 图9

网页布局第二准则:先布局盒子的大小,再布局盒子的位置

    <style>
        .box {
            height: 615px;
            width: 1226px;
            background-color: pink;
            margin: 0 auto;
        }
 
        .left {
            width: 234px;
            height: 615px;
            background-color: bisque;
            float: left;
        }
 
        .right {
            width: 992px;
            height: 615px;
            background-color: yellowgreen;
            float: left;
        }
 
        .right>div {
            width: 234px;
            height: 300px;
            background-color: cadetblue;
            float: left;
            margin-left: 14px;
            margin-bottom: 14px;
        }
    </style>
    <div class="box">
        <div class="left">左</div>
        <div class="right">
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
            <div>2</div>
        </div>
    </div>
CSS_float浮动布局与案例讲解 图10
    收藏