【CSS】浅谈浮动

最新推荐文章于 2024-02-06 17:21:22 发布

YinJie…

最新推荐文章于 2024-02-06 17:21:22 发布

阅读量270

点赞数 3

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_49900295/article/details/122941618

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章目录

一、文档流介绍
二、什么是浮动？
三、浮动总结
四、清除浮动

一、文档流介绍

网页布局的核心，就说用CSS来摆放盒子位置，那么，如何把盒子摆放到合适的位置呢？

下面介绍一下CSS的定位机制：
CSS的定位机制有3种：普通流（标准流）、浮动和定位

普通流：普通流实际上就是一个网页内便签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列

二、什么是浮动？

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程

在CSS中通过float属性来定义浮动，其基本语法格式如下：

float:left /*元素向左浮动*/
float:right /*元素向右浮动*/

下面我们简单体会一下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            div {
                width: 200px;
                height: 300px;
                background-color: pink;
            }
            div:nth-child(2) {
                background-color: hotpink;
            }
            div:last-child {
                background-color: purple;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

这样的话，三个div盒子一定是竖着以标准流格式摆放的，如下所示：
在这里插入图片描述
但是我们想让三个盒子在一行显示，除了声明为行内块元素外，我们就得通过浮动来完成了
加一句 float:left
运行代码如下所示：

这样我们就轻松实现了三个盒子放在一行上显示

浮动详细内幕特性：
浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动

浮动首先创建包含块的概念。就是说，浮动的元素总是找离他最近的父级元素对齐。但是不会超出内边距的范围
在这里插入图片描述
浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐

在这里插入图片描述

由上图可知，一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示

元素添加浮动后，元素会具有行内块的特性。元素的大小完全取决于定义的大小或者内容的多少

也就是说块级元素添加浮动之后，具有行内块的特性

import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import warnings
warnings.filterwarnings('ignore')
import  ssl
ssl._create_default_https_context = ssl._create_unverified_context

三、浮动总结

浮动的目的就是为了让多个块级元素同一行上显示
加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面
加了浮动的盒子是不占位置的，它浮起来了，他原来的位置漏给了标准流的盒子
特别注意，首先浮动的盒子需要和标准流的父级搭配使用，其次，特别注意的是浮动可以使元素显示模式体现为行内块特性

四、清除浮动

1.为什么要清除浮动？

由于浮动元素不再占用原文档的位置，所以会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。准确地说，不是清除浮动，而是清除浮动后造成的影响

2.清除浮动的本质

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
           .box1 {
               width: 600px; /*不给父盒子高度因为要根据子盒子大小动态变化*/
               background-color: pink;
           }
           .box2 {
               width: 600px;
               height: 240px;
               background-color: purple;
           }
           .son1 {
               width: 150px;
               height: 100px;
               background-color: skyblue;
           }
           .son2 {
               width: 300px;
               height: 100px;
               background-color: hotpink;
           }
        </style>
    </head>
    <body>
        <div class="box1">
            <div class="son1"></div>
            <div class="son2"></div>
        </div>
        <div class="box2"></div>
    </body>
</html>