3.清除浮动

这篇具有很好参考价值的文章主要介绍了3.清除浮动。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

3.1 为什么需要清除浮动?

由于父级盒子在很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为0时,就会影响下面的标准流盒子。
3.清除浮动,前端——CSS,css,css3,前端

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

3.2 清除浮动本质

●清除浮动的本质是清除浮动元素造成的影响
●如果父盒子本身有高度,则不需要清除浮动
●清除浮动之后,父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了

3.3 清除浮动

语法:

选择器{ clear:属性值; }

3.清除浮动,前端——CSS,css,css3,前端
实际开发中几乎只用 clear:both;
清除浮动的策略是:闭合浮动

3.4 清除浮动的方法

1.额外标签法,也称为隔墙法,是W3C推荐的做法
2.父级添加overflow属性
3.父级添加after伪元素
4.父级添加双伪元素
(重点掌握2、3、4)

源代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 800px;
            border: 1px solid #000;
            margin: 0 auto;
        }
        .n1{
            float: left;
            width: 300px;
            height: 200px;
            background-color: aqua;
        }
        .n2{
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .footer {
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="n1">1</div>
        <div class="n2">2</div>
    </div>
    <div class="footer"></div>
</body>
</html>

3.清除浮动,前端——CSS,css,css3,前端

将上面这个没有采用清除浮动的源代码分别用这4种方法处理.

3.4.1 额外标签法

额外标签法也称为隔墙法,是W3C推荐的做法。
额外标签法会在浮动元素末尾添加一个空的标签。
例如< 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">
    <title>Document</title>
    <style>
        .box {
            width: 800px;
            border: 1px solid #000;
            margin: 0 auto;
        }

        .n1 {
            float: left;
            width: 300px;
            height: 200px;
            background-color: aqua;
        }

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

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

<body>
    <div class="box">
        <div class="n1">1</div>
        <div class="n2">2</div>
        <!-- 这个新增的盒子要求必须是 块级元素 不能是行内元素 -->
        <div style="clear: both"></div>
    </div>
    <div class="footer"></div>
</body>

</html>

总结:
1.清除浮动本质是:清除浮动元素脱离标准流造成的影响
2.清除浮动策略是:闭合浮动。只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子.
3.额外标签法:即隔墙法,就是在最后一个浮动的子元素后面添加一个额外标签,添加清除浮动样式。但这种方法不常用

3.4.2 父级添加 overflow

可以给父级添加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">
    <title>Document</title>
    <style>
        .box {
            /* 清除浮动 */
            overflow: hidden;
            width: 800px;
            border: 1px solid #000;
            margin: 0 auto;
        }

        .n1 {
            float: left;
            width: 300px;
            height: 200px;
            background-color: aqua;
        }

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

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

<body>
    <div class="box">
        <div class="n1">1</div>
        <div class="n2">2</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">
    <title>Document</title>
    <style>
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /*IE6、7专有*/
            zoom: 1;
        }

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

        .n1 {
            float: left;
            width: 300px;
            height: 200px;
            background-color: aqua;
        }

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

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

<body>
    <div class="box clearfix">
        <div class="n1">1</div>
        <div class="n2">2</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">
    <title>Document</title>
    <style>
        .clearfix:before,
        .clearfix:after {
            content: "";
            /* 把模式转换成表格 */
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            zoom: 1;
        }

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

        .n1 {
            float: left;
            width: 300px;
            height: 200px;
            background-color: aqua;
        }

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

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

<body>
    <div class="box clearfix">
        <div class="n1">1</div>
        <div class="n2">2</div>
    </div>
    <div class="footer"></div>
</body>

</html>

以上4种方法处理结果都为:
3.清除浮动,前端——CSS,css,css3,前端

3.5清除浮动总结

为什么需要清除浮动?
① 父级没高度
② 子盒子浮动了
③ 影响到下面布局了,我们就应该清除浮动

3.清除浮动,前端——CSS,css,css3,前端文章来源地址https://www.toymoban.com/news/detail-529668.html

到了这里,关于3.清除浮动的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影

    目录 CSS盒子模型 概念 弹性盒模型(flex box) 内容 父元素上的属性 display属性 flex-direction属性 justify-content属性 align-items属性 子元素上的属性 flex 文档流(标准流) 浮动 定义 浮动的原理 清除浮动 浮动的副作用 父元素设置高度 overflow清除浮动 伪对象方式 定位 定义 相对定位

    2024年02月11日
    浏览(62)
  • 【前端|CSS系列第3篇】CSS盒模型、浮动及定位

    在前端开发中,CSS是一项重要的技术,用于控制网页的样式和布局。在本系列的第三篇文章中,我们将学习CSS的盒模型、浮动以及定位,这些概念和技术在页面布局中起着至关重要的作用。通过本文的学习,希望能够帮助大家更好地理解和运用这些关键概念。 CSS盒模型是用来

    2024年02月11日
    浏览(52)
  • 前端学习笔记:CSS中浮动的原理,定位

    这是本人学习的总结,主要学习资料如下 马士兵教育 float设计的初衷是为了有文字环绕图片的效果,比如下图。 所以有浮动效果的元素一定不会遮挡其他元素的文字。比如有两个 div ,两个 div 都有文字,正常文字在 div 左上角。 我们设置一个浮动一个不浮动,我们会看到浮

    2024年02月03日
    浏览(53)
  • 3-web前端 css 网页样式语言,基础语言、盒子模型、浮动

    html和css的关系:   HTML(HyperText Markup Language,超文本标记语言)是用于创建网页的标准标记语言。它负责定义网页的结构和内容。HTML使用各种标签来包含文本、链接、图 片、视频等元素,并可以与如JavaScript等其他技术结合使用,实现网页的动态功能。   CSS (Cascading S

    2024年02月08日
    浏览(59)
  • 前端学习——CSS3

    box-sizing resize box-shadow opacity background-origin background-clip background-size background复合属性 多背景图 边框圆角 边框外轮廓 文本阴影 文本换行 文本溢出 文本修饰 文本描边 线性渐变

    2024年02月12日
    浏览(49)
  • 前端之css3

            1 新增实用的选择器,例如动态伪类,目标伪类,伪元素         2 新增更好的视觉效果         3 新增丰富的背景效果         4 新增全新的布局方案         5 新增web字体         6 新增颜色,hsl,hsla,rgba         7 新增2D和3D变换         8 新增动画和过渡效

    2024年02月13日
    浏览(64)
  • 【前端】CSS3新特性

      css3这个相信大家不陌生了,是个非常有趣,神奇的东西!有了css3,js都可以少写很多!最近我也在过一遍css3的一些新特性(不是全部,是我在工作上常用的,或者觉得有用的),以及一些实例,就写了这一篇总结!希望,这篇文章能帮到大家认识css3。   写这篇文章主

    2024年02月09日
    浏览(35)
  • 2023前端面试笔记 —— CSS3

    内容 链接 2023前端面试笔记 HTML5 2023前端面试笔记 CSS3 欢迎阅读本篇前端面试笔记的CSS3篇!CSS3是前端开发中非常重要的一部分,它为我们提供了丰富的 样式和动画效果 ,使得网页更加美观和交互性更强。在前端面试中,对CSS3的掌握程度往往是评判候选人技术水平的重要指标

    2024年02月11日
    浏览(50)
  • 前端学习——css盒子模型、css3新特性、伪类、布局0711TODO

    样式还是得具体使用才能理解,不然会忘记也理解不透彻;还有定位,元素溢出,浮动,布局水平垂直对齐: css3新特性 1过渡 2 动画 3 2D、3D转换 伪类 三种定位方式 弹性布局/栅格布局

    2024年02月15日
    浏览(53)
  • 前端小白的学习之路(CSS3 三)

    提示:过渡属性transition,动画属性animation,转化属性transform,裁剪属性clip-path,倒影属性box-reflect,模糊度属性filter  目录 一、transition  二、animation  三、transform  四、clip-path   五、box-reflect  六、filter  过渡:以看见标签从一个属性变化到另一个属性值的过程。 transition-pro

    2024年03月19日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包