css浮动

前端志茗

已于 2022-07-17 21:22:38 修改

阅读量140

点赞数

文章标签： css 前端 css3

于 2022-06-08 21:49:35 首次发布

本文链接：https://blog.csdn.net/qq_56745273/article/details/125191713

版权

文章目录

浮动

浮动

出现浮动的背景

我们先来看一下MDN官方文档是如何解释的：

最初，引入 float 属性是为了能让 web 开发人员实现简单的布局，包括在一列文本中浮动的图像，文字环绕在它的左边或右边。你可能在报纸版面上看到过。
但 Web 开发人员很快意识到，任何东西都可以浮动，而不仅仅是图像，所以浮动的使用范围扩大了。
浮动曾被用来实现整个网站页面的布局，它使信息列得以横向排列（默认的设定则是按照这些列在源代码中出现的顺序纵向排列）。目前出现了更新更好的页面布局技术，所以使用浮动来进行页面布局应被看作传统的布局方法。

这是MDN官方文档的解释，光看解释可能有点索然无味，我来通过例子解释一下，首先引入浮动是让我们前端开发人员实现一些简单的布局，就相当于word里面的图片能够浮动在文字的一旁：
浮动简介
但是浮动只能用来实现这样的小功能是不是“太屈才”了。如果要写一个：
淘宝首页截图
这样的网页是不是更美观呢。所以前端开发人员就意识到任何元素都可以浮动，而不仅仅只是局限于照片了，所以浮动的使用范围就扩大了。久而久之，浮动就变得使用浮动来进行页面布局应被看作传统的布局方法。

浮动实现布局

经典的两列布局

<!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>
        body {
            width: 90%;
            max-width: 900px;
            margin: 0 auto;
        } 
        div:nth-of-type(1) {
            width: 48%;
            float: left;
        }
        div:nth-of-type(2) {
            width: 48%;
            float: left;
        }
    </style>
</head>
<body>
    <h1>2 column layout example</h1>
    <div>
        <h2>First column</h2>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit
            amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac
            imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
    </div>
    <div>
        <h2>Second column</h2>
        <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor,
            sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes,
            nascetur ridiculus mus.</p>
    </div>
</body>
</html>

运行截图如下：
两列布局
我们可以看到，这就是经典的两栏布局。从这一个两栏布局我们就可以看出来浮动的特殊之处了，元素可以随着自己的设置浮动想在哪就在哪，这不香？所以浮动在之前很受欢迎，现在也是如此。

浮动–“无懈可击”？

为什么我会加一个**？**呢，继续阅读，你会找到答案。

浮动的特点

浮动的元素脱离标准流

<!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>
        .one {
            float: left;
            width: 80px;
            height: 80px;
            background-color: blue;
        }      
        .two {
            width: 150px;
            height: 150px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>
</html>

运行截图如下：
浮动的元素脱离标准流
从运行结果可以看出蓝色在红色的里面，但是我给蓝色设置了左浮动了呀。不应该是蓝色在红色的左边吗，它两个这辈子应该没有交集呀。对的，按理说说它两井水不犯河水，永远没有交集，但是元素一旦设置了浮动，就会脱离文档流，不能用正常的思路去看它了，所以红色的div就自然的往上移动了，这就是浮动的一大特性–脱离文档流

浮动的元素互相贴靠

<!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>
        .one {
            float: left;
            width: 80px;
            height: 80px;
            background-color: blue;
        }
        .two {
            width: 150px;
            height: 150px;
            background-color: red;
            float: left;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>
</html>

运行截图如下：

我们可以看到，我只是给红色的正方形也设置了一个左浮动，但是结果却是两个正方形一起挨着。
这就是浮动的一大特性–浮动的元素互相贴靠

浮动的元素有"字围"效果

<!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>
        img {
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
        } 
        p {
            width: 500px;
            height: 500px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <img src="./github.jpg" alt="">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet dolorem molestias saepe, reprehenderit laudantium aspernatur fuga deserunt officiis. Iusto deserunt voluptatem labore ipsa sequi magnam unde facilis itaque reiciendis beatae?</p>
</body>
</html>

运行结果如下：
浮动的元素由"字围"效果
从效果图中可以看出，照片设置了左浮动，遮住了黄色的div，这就是浮动的第一个特性脱离文档流，但是可以看出，文字并没有被盖住，这就是浮动的一大特性–字围效果

宽度自由的收缩

<!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>
        div {
            background-color: red;
        }
    </style>
</head>
<body>
    <div>one one one </div>
</body>
</html>

运行效果图如下：
收缩的效果
当我给div加上浮动之后：

<!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>
        div {
            background-color: red;
            float: left;
        }
    </style>
</head>

<body>
    <div>one one one </div>
</body>

</html>

运行效果图如下：
加上浮动之后
加上左浮动，可以看出div的宽度自动收缩了，这就是浮动的一大特性–宽度自由的收缩

清除浮动

有的时候，给一个元素设置了浮动，但是牵一发而动全身，整个网页就会发生不可思议的变化。这也是由它的特性引起的。导航栏就可以很好的体现：

<!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>
        li {
            float: left;
            width: 100px;
            height: 20px;
            background-color: red;
        }
    </style>
</head>

<body>
    <ul>
        <li>导航1</li>
        <li>导航2</li>
        <li>导航3</li>
    </ul>
    <ul>
        <li>导航4</li>
        <li>导航5</li>
        <li>导航6</li>
    </ul>
</body>

</html>

运行效果图如下：
清除浮动
从效果图中我们看出，这个导航栏只有一个，但是从代码块中可以看到，我明显的是想要两个导航栏，但是由于设置了浮动，浮动的特性–浮动的元素互相贴靠就让两个导航栏变成了一个导航栏。所以我们要找办法将浮动清除，

clear 属性
首先就是clear属性，设置clear属性，属性值就是设置的浮动left

<!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>
        li {
            float: left;
            width: 100px;
            height: 20px;
            background-color: red;
        }       
        ul:nth-of-type(2) {
            clear: left;
        }
    </style>
</head>
<body>
    <ul>
        <li>导航1</li>
        <li>导航2</li>
        <li>导航3</li>
    </ul>
    <ul>
        <li>导航4</li>
        <li>导航5</li>
        <li>导航6</li>
    </ul>
</body>
</html>

运行结果如下：
clear 属性
设置了clear属性，就可以实现我想要的两个导航栏了，这就是清除了浮动

overflow属性
设置overflow属性，属性值是hidden，溢出隐藏

<!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>
        li {
            float: left;
            width: 100px;
            height: 20px;
            background-color: red;
        }
        
        ul {
            overflow: hidden;
        }
    </style>
</head>

<body>
    <ul>
        <li>导航1</li>
        <li>导航2</li>
        <li>导航3</li>
    </ul>
    <ul>
        <li>导航4</li>
        <li>导航5</li>
        <li>导航6</li>
    </ul>
</body>

</html>

运行结果如下：
overflow属性
可以看出，我们的需求正常实现了

伪类清除法

<!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>
        li {
            float: left;
            width: 100px;
            height: 20px;
            background-color: red;
        }
        
        ul:nth-of-type(1)::after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        
        ul:nth-of-type(2) {
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <ul>
        <li>导航1</li>
        <li>导航2</li>
        <li>导航3</li>
    </ul>
    <ul>
        <li>导航4</li>
        <li>导航5</li>
        <li>导航6</li>
    </ul>
</body>

</html>

运行结果如下：
伪类清除法
可以看出，通过伪元素的设置，可以得到我们需要的两个导航栏。

浮动–现状

浮动现在应该快要被舍弃了，因为有更好的弹性盒模型和网格布局供我们使用。但是仍然适用于初学者使用。

前端志茗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css浮动

我们先来看一下MDN官方文档是如何解释的：这是MDN官方文档的解释，光看解释可能有点索然无味，我来通过例子解释一下，首先引入浮动是让我们前端开发人员实现一些简单的布局，就相当于word里面的图片能够浮动在文字的一旁：但是浮动只能用来实现这样的小功能是不是“太屈才”了。如果要写一个：这样的网页是不是更美观呢。所以前端开发人员就意识到任何元素都可以浮动，而不仅仅只是局限于照片了，所以浮动的使用范围就扩大了。久而久之，浮动就变得使用浮动来进行页面布局应被看作传统的布局方法。运行截图如下：我们可以看到
复制链接

扫一扫