CSS浮动（常见的网页布局、清除浮动）

于 2024-07-23 16:54:55 发布
阅读量484 收藏 10
点赞数 13
分类专栏： HTML基础篇 文章标签： css 前端 学习 开发语言 css3 javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79341065/article/details/140640531
版权

（大家好，今天我们将继续来学习CSS的相关知识，大家可以在评论区进行互动答疑哦~加油！💕）

目录

二、常见网页布局

2.1 常见网页布局

2.2 浮动布局注意点

三、清除浮动

 3.1 为什么需要清除浮动？

3.2 清除浮动本质

3.3 清除浮动

3.4 清除浮动的多种方式

3.4.1  额外标签法

3.4.2  父级添加overflow属性

 3.4.3 父级添加after伪元素

3.4.4 父级添加双伪元素

3.5 清除浮动总结

二、常见网页布局

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 浮动布局注意点

 *注意： 

1、浮动和标准流的父盒子搭配。

  先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

2、一个元素浮动了，理论上其余的兄弟元素也要浮动。

  一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，以防止引起问题。

  浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流。

图示如下：

代码： 

<!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>
        /* 如果一个子元素浮动了,尽量其他盒子也浮动,这样保证这些子元素一行显示 */
        .box {
            width: 900px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
        }
 
        .damao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
 
        .ermao {
            float: left;
            width: 200px;
            height: 150px;
            background-color: red;
        }
 
        .sanmao {
            float: left;
            width: 300px;
            height: 240px;
            background-color: blue;
        }
    </style>
</head>
 
<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        <div class="sanmao">三毛</div>
    </div>
</body>
 
</html>

三、清除浮动

 3.1 为什么需要清除浮动？

  • 由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。

  • 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。

3.2 清除浮动本质

清除浮动的本质是清除浮动元素造成的影响：浮动的子标签无法撑开父盒子的高度。

*注意：

  • 如果父盒子本身有高度，则不需要清除浮动
  • 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。
  • 父级有了高度，就不会影响下面的标准流了

3.3 清除浮动

语法：

      选择器 { clear：属性值；}

属性值描述
left不允许左侧有浮动元素（清除左侧浮动的影响）
right不允许右侧有浮动元素（清除右侧浮动的影响）
both同时清除左右两侧浮动的影响
  •  我们实际工作中， 几乎只用 clear: both;
  • 清除浮动的策略是: 闭合浮动。

3.4 清除浮动的多种方式

  1. 额外标签法：也称为隔离法，是W3C推荐的做法。
  2. 父级添加overflow属性。
  3. 父级添加after伪元素。
  4. 父级添加双伪元素。

3.4.1  额外标签法

使用方式：

​ 额外标签法会在浮动元素末尾添加一个空的标签，或其他标签。

eg：

<div  style ="  clear:both " ></div>

或</br>

  • 优点： 通俗易懂，书写方便。
  • ​ 缺点： 添加许多无意义的标签，结构化较差。

​ *注意： 要求这个新的空标签必须是块级元素。

代码：

<!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>
        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }
 
        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }
 
        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
 
        .footer {
            height: 200px;
            background-color: black;
        }
 
        .clear {
            clear: both;
        }
    </style>
</head>
 
<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        
        <div class="clear"></div>
        <!-- 这个新增的盒子要求必须是块级元素不能是行内元素 -->
        <span class="clear"></span>
    </div>
    <div class="footer"></div>
 
</body>
 
</html>

 清除浮动之前：

  清除浮动之后：

3.4.2  父级添加overflow属性

可以给父级添加 overflow 属性，将其属性值设置为 hidden、auto 或 scroll 。

overflow:hidden | auto | scroll;

  • 优点：代码简洁
  • 缺点：无法显示溢出的部分

*注意：是给父元素添加代码

代码：

<!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>清除浮动--父级加overflow属性</title>
    <style>
        .box {
            /* 清除浮动 */
            overflow: hidden;
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>

</body>

</html>

 3.4.3 父级添加after伪元素

:after 方式是额外标签法的升级版。给父元素添加以下代码：

.clearfix:after {

   content: "";

   display: block;

   height: 0;    

   clear: both;

   visibility: hidden;

   }

 .clearfix {

 /* IE6、7 专有 */

   *zoom: 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>after清除浮动</title>
    <style>
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        <!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>
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
 
        .clearfix {
            /* IE6、7 专有 */
            *zoom: 1;
        }
 
        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }
 
        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }
 
        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
 
        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
    </head>
    
    <body>
        <div class="box clearfix">
            <div class="damao">大毛</div>
            <div class="ermao">二毛</div>
        </div>
        <div class="footer"></div>
    
    </body>
    
    </html>

        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>

</body>

</html>

3.4.4 父级添加双伪元素

给父元素添加以下代码：

 .clearfix:before,.clearfix:after {
   content:"";
   display:table; 
 }
 .clearfix:after {
   clear:both;
 }
 .clearfix {
    *zoom: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>
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>

</body>

</html>

3.5 清除浮动总结

为什么需要清除浮动？

  • 父级没高度。
  • 子盒子浮动了。
  • 影响下面布局了，我们就应该清除浮动了。

清除浮动方式：

清除浮动方式优点缺点
额外标签法通俗易懂，书写方便添加许多无意义i标签，结构化差
父级overflow:hidden;书写简单溢出隐藏
父级after伪元素结构语义化正确由于IE6、7不支持：after，兼容性问题
父级双伪元素结构语义化正确由于IE6、7不支持：after，兼容性问题

（今日分享暂时到此为止啦！为不断努力的自己鼓鼓掌吧🥳。今日文案分享：努力的意义从来不是成功，而是不留遗憾。） 

Squirrel.J
关注
  • 13
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 清除网页浮动 经验
09-27
在网页设计中，浮动布局（Float Layout）是一种常见的布局方式，它允许元素在页面上左右浮动，以便创建多列布局或者让文本环绕图像。然而，浮动元素会脱离正常文档流，这可能导致一些问题，比如父元素无法正确计算其...
CSS 清除浮动元素方法 整理
09-25
浮动布局是一种常见的CSS技术，它允许元素在页面上左右浮动，以实现灵活的多列布局。然而，浮动元素可能会引发一个问题，即它们会脱离正常的文档流，导致其父元素的高度无法自动扩展，从而产生所谓的“浮动塌陷”。...
CSS 清除浮动Clear
09-25
4. 使用Flexbox或Grid布局：在现代浏览器中，Flexbox和CSS Grid提供了更强大的布局控制，可以轻松地替换浮动布局，而无需清除浮动。这两个布局模型可以自然地处理元素的对齐和排列，避免了传统浮动带来的问题。 ...
CSS 清除浮动方法大全
09-25
CSS 清除浮动是网页布局中至关重要的一个概念，主要是为了解决元素浮动后对其周围元素产生的影响，防止内容被浮动元素覆盖或布局混乱。浮动元素通常用于创建多列布局，但如果不进行适当的清除，可能会导致父元素高度...
CSS清除浮动方法汇总
10-20
本文将汇总一些常见的CSS清除浮动的方法。 1. **传统clear属性** CSS的`clear`属性用于指定元素是否可以放在浮动元素的旁边。如果设置为`clear:left`，则元素不会出现在左侧有浮动元素的地方；`clear:right`不让...
最新！CSSCI（2023-2024）期刊目录公布！
2301_76900678的博客
07-19 558
C刊一般指CSSCI来源期刊，即南大核心的缩写，中文名称为《中文社会科学引文索引》，由南京大学中国社会科学研究评价中心制定，用来评价中文社会科学领域的论文收录和文献被引用情况，是我国人文社会科学评价领域的标志性工程。C扩即CSSCI来源期刊扩展版。由于上文所述的C刊是国内期刊中的重要刊物，遴选数量有限，一些优秀刊物由于数量限制无法进入C刊目录，C扩一般指办刊水平和学术价值与真正入选目录期刊还有一些差距但差距不大的刊物，C扩有进入C刊的预期，但C扩是否为核心期刊具体仍由不同单位自己判断。
Tailwind CSS：颠覆常规的实用主义设计利器
艾恩小灰灰的博客
07-18 515
Tailwind CSS 是一个实用类优先的 CSS 框架，它不提供预设的组件或设计系统，而是通过一系列小而功能明确的实用类，允许开发者快速构建自定义的设计。与 Bootstrap、Foundation 等传统框架相比，Tailwind 更强调灵活性和可定制性。Tailwind CSS 通过其独特的实用类优先方法，为前端开发带来了新的视角。它不仅简化了样式编写，还提高了开发效率和代码的可维护性。
CSS实现从上往下过渡效果
Rverdoser的博客
07-18 236
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
HTML、CSS、JS浅浅浅浅浅解
lbdking的博客
07-20 1397
初识Web web标准 web标准也被称为网页标准，由一系列的标准组成，大部分由W3C（World Wide Web Cnsortium，万维网联盟）负责制定。 三个组成部分 HTML:负责网页的结构（页面元素和内容）。 CSS：负责网页的表现（页面元素的外观，位置等页面样式，如：颜色、大小等）。 JavaScript：负责网页的行为（交互效果）。 HTML HTML：超文本标记语言 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片，音频，视频等内容。 标记语言：由标签构
网页隐藏版之一行小说阅读器
m0_47147246的博客
07-19 339
网页隐藏版一行小说阅读器
CSS|06 背景样式
Catherinemin的博客
07-19 731
距离他左边的盒子的距离为100px，第二个100px表示 背景图片的。/*左内填充，盒子里面的内容到左边边框线的距离，就称为左内填充*/语法： background-color: red;/*background-repeat 平铺*//*background-repeat 平铺*//*background-repeat 平铺*/
前端学习（二）之HTML
2302_79795489的博客
07-18 967
在<input type="text" name="username" value="西瓜大侠">中，2、单选和多选：radio和checkbox（对应value为选项的值，当选中时，这个值会被提交）3、按钮：button、submit和reset（对应value为按钮上的标签文本）4、隐藏字段：hidden（对应value为隐藏在表单中的用户不可见的数值）段落格式标签：加粗b，斜体i，下划线u，删除线s，换行br，水平分割线hr。1、name：给表单控件起的名字，服务器靠这个名字来识别和获取输入的数据。
掌控视界：WebKit与CSS视口单位的卓越支持
2401_85742452的博客
07-19 659
CSS视口单位是一种相对单位，它们相对于视口（浏览器窗口）的大小进行缩放。vw（Viewport Width）：视口宽度的1%。vh（Viewport Height）：视口高度的1%。vmin：视口宽度和高度中的较小值的1%。vmax：视口宽度和高度中的最大值的1%。
Tailwind CSS常见用法
solocao的专栏
07-18 331
Tailwind CSS允许在tailwind.config.js配置文件中自定义样式，如颜色、字体大小、边框宽度等。然后，这些自定义样式可以在HTML中通过类名引用，如text-custom-size。
关于css中flex布局垂直居中失效问题的原因
zuo-yiran的博客
07-19 196
flex布局垂直居中失效原因
编织文字的魔法：探索WebKit的CSS文本效果
2401_85341950的博客
07-19 728
WebKit，作为众多浏览器的核心引擎，支持一系列CSS文本效果，使开发者能够创造出引人注目的文本样式。本文将深入探讨WebKit对CSS文本效果的支持，并提供详细的解释和代码示例。请注意，本文提供了一个关于WebKit CSS文本效果的概述，包括代码示例和关键概念的解释。通过本文的介绍，你应该对WebKit的CSS文本效果有了基本的了解。通过本文，我们希望能够帮助开发者更好地利用WebKit的CSS文本效果，创造出更加丰富和吸引人的Web页面。通过媒体查询，可以为不同屏幕尺寸的设备应用不同的文本效果。
WebKit 引擎：CSS 悬停效果的魔法师
2401_85702623的博客
07-19 716
WebKit 引擎对 CSS 悬停效果的支持非常全面，从基本的颜色变化到复杂的动画效果，都能通过 CSS 实现。通过本文的介绍和代码示例，希望读者能够对 CSS 悬停效果有更深入的理解，并能够在自己的项目中应用这些技术。在这个例子中，当用户将鼠标悬停在链接上时，链接的文字颜色会变为红色。在这个例子中，当鼠标悬停在按钮上时，按钮会有一个轻微的阴影效果。这个例子中，鼠标悬停在按钮上时，按钮会放大到原来的110%。这个例子中，鼠标悬停在按钮上时，按钮的边框会变为蓝色。属性，可以设置属性变化的持续时间和效果类型。
Vue 3 + Vite 项目中安装 Tailwind CSS
最新发布
lq099526的专栏
07-22 202
安装 Tailwind CSS步骤，失效，样式不加载
display: flex 和 justify-content: center 强大居中
naozibuok的博客
07-19 464
你还在为居中而烦恼吗，水平居中多个元素、创建响应式布局、垂直和水平同时居中内容。它，display: flex 和 justify-content: center 都可以完成！display: flex：将元素定义为flex容器justify-content：定义项目在主轴上的对齐方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值