⑤CSS浮动&学成在线网实例_学成网浮动布局-CSDN博客

本文链接：https://blog.csdn.net/LINZHONG21/article/details/120731330

本文详细介绍了CSS中的浮动布局，包括标准流、浮动的原理和特性，以及如何使用浮动进行网页布局。同时，讨论了浮动布局的注意事项，如父元素高度问题和清除浮动的方法，如额外标签法、overflow属性和伪元素法。此外，还提到了PS切图的几种方式，以及在学成在线案例中应用CSS属性书写顺序和布局思路。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.浮动( float)

1.2标准流(普通流/文档流)

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

块级元索会独占一行,从上向下顺序排列。
● 常用元素:div. hr、 p. h1~h6、 ul. ol. dl. form、 table
行内元素会按照顺序,从左到右顺序排列,碰到父元索边缘则自动换行。
● 常用元素: span. a、i. em等

以上都是标准流布局, 我们前面学习的就是标准流,标准流是最基本的布局方式。

这三种布局方式都是用来摆放盒子的,盒子摆放到合适位置,布局自然就完成了。

注意:实际开发中，-一个页面基本都包含了这三种布局方式(后面移动端学习新的布局方式)。

1.3为什么需要浮动?

总结: 有很多的布局效果,标准流没有办法完成,此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式
浮动最典型的应用:可以让多个块级元素-行内排列显示。
网页布局第一准则 : 多个块级元索纵向排列找标准流,多个块级元索横向排列找浮动。

1.4什么是浮动?

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

语法:

选择器{ float: 属性值; }

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>07-什么是浮动</title>
    <style>
        .left,
        .right {
     
            background-color: pink;
            width: 200px;
            height: 300px;
            float: left;

        }
        .right {
     
            float: right;
        }
    </style>
</head>
<body>
    <div class="left">左青龙</div>
    <div class="right">右白虎</div>
</body>
</html>

在这里插入图片描述

1.5浮动特性(重难点)

加了浮动之后的元素，会具有很多特性,需要我们掌握的.
1.浮动元素会脱离标准流(脱标)
2.浮动的元素会一行内显示并且元素顶对齐
3.浮动的元素会具有行内块元素的特性

设置了浮动( float )的元素最重要特性:
1.脱离标准普通流的控制(浮)移动到指定位置(动), (俗称脱标)
2.浮动的盒子不再保留原先的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>08-浮动的特性-脱标</title>
    <style>
        .box1 {
     
            width: 200px;
            height: 100px;
            background-color: pink;
            float: left;
        }
        .box2 {
     
            width: 300px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box1">浮动的盒子</div><div class="box2">标准的盒子</div>
    
</body>
</html>

在这里插入图片描述
2.如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。

注意:浮动的元素是互相贴靠在-起的(不会有缝隙) ，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>09-浮动元素一行显示</title>
    <style>
        div {
     
            width: 200px;
            height: 200px;
            float: left;
        }
        .one {
     
            background-color: pink;
        }
        .two {
     
            background-color: green;
            height: 300px;
        }
        .three {
     
            background-color: blue;
        }
        .four {
     
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
    <div class="four">4</div>
</body>
</html>

在这里插入图片描述
3.浮动元素会具有行内块元素特性。
任何元素都可以浮动。不管原先是什么模式的元素,添加浮动之后具有行内块元素相似的特性。
●如果块级盒子没有设置宽度,默认宽度和父级-样宽,但是添加浮动后,它的大小根据内容来决定
●浮动的盒子中间是没有缝隙的,是紧挨着一起的
●行内元素同理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10-浮动元素具有行内块元素</title>
    <style>
        span,
        div {
     
            float: left;
            width: 200px;
            height: 150px;
            background-color: pink;
        }
        p {
     
            float: right;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <span>1</span>
    <span>2</span>
    <div>div</div>
    <p>p</p>
</body>
</html>

在这里插入图片描述

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

为了约束浮动元素位置我们网页布局一般采取的策略是:
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置.符合网页布局第一-准侧
在这里插入图片描述
案例一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>11-浮动元素经常和标准流的父级搭配使用</title>
    <style>
        .box {
     
            width: 1200px;
            height: 460px;
            background-color: pink;
            margin: 0 auto;
        }
        .left {
     
            float: left;
            width: 230px;
            height: 460px;
            background-color: purple;
        }
        .right {
     
            float: left;
            width: 970px;
            height: 460px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">左侧</div>
        <div class="right">右侧</div>
    </div>
</body>
</html>

在这里插入图片描述
案例二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>12-浮动布局练习</title>
    <style>
        * {
     
            margin: 0;
            padding: 0;
        }
         li {
     
             list-style: none;
             
         }
        .box {
     
            width: 1226px;
            height: 285px;
            margin: 0 auto;
            background-color: pink;
        }
        .box li {
     
            float: left;
            height: 285px;
            width: 296px;
            background-color: purple;
            margin-right: 14px;
        }
        /* 这里必须写.box .last  要注意权重的问题 */
        .box .last {
     
            margin-right: 0;
        }
    </style>