清除浮动造成的高度塌陷

最新推荐文章于 2024-10-30 16:25:45 发布

鱼有个梦想

最新推荐文章于 2024-10-30 16:25:45 发布

阅读量281

点赞数

分类专栏： CSS 文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_43573843/article/details/122815568

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文探讨了在CSS布局中如何使用.clearfix方法解决底部元素浮动后导致的高度塌陷问题。通过在父元素上添加.clearfix类，并利用伪元素`:after`来清除浮动，可以有效地防止内容区域因浮动元素而收缩。此技术在前端开发中广泛应用，确保布局的稳定性。

摘要由CSDN通过智能技术生成

.bottom_frist img{
       float: left;
    }
    .bottom_frist::after{
       content:'';
        clear:both;
        display:block;
        visibility:hidden;
        height:0; 
    }

清除浮动造成的高度塌陷
再其父类中添加after伪类

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

鱼有个梦想

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

清除浮动（解决高度塌陷）

qq_44947631的博客

07-31

131

一、什么是父元素高度塌陷 <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .parent{ width: 50

解决浮动后的高度塌陷问题的四种方式

qq_52939119的博客

06-18

4762

解决高度塌陷问题首先来介绍一下高度塌陷问题 1、在浮动布局中，父元素的高度默认是被子元素撑开的。 2、当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑开父元素的高度，导致父元素的高度丢失，高度丢失后，其下的元素会自动上移，导致页面混乱。解决高度塌陷的四种方法： BFC clear 使用伪类after clearfix 一、BFC全称 (Block Formatting Context) 块级格式化环境元素开启BFC的特点: 1、开启BFC的元素不会被浮动元素所覆盖 2、开

参与评论您还未登录，请先登录后发表或查看评论

如何清除浮动，解决高度塌陷的问题

cs13083177504的博客

04-04

697

一、浮动到底是什么？ W3school中给出的浮动定义为浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框脱离文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。二、浮动的特点浮动元素会完全脱离文档流，不再占据文档流中的位置设置浮动以后元素会向父元素的左侧或右侧移动浮动元素默认不会从父元素中移出浮动元素向左或向右移动时，不会超过它前边的其他浮动元素如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移浮动元素不会超过它上边的

css-浮动造成的高度塌陷原因以及解决方法 清除浮动 BFC

m0_51534164的博客

09-18

1243

css-浮动造成的高度塌陷原因以及解决方法 清除浮动 BFC

前端开发：盒子的浮动与清除浮动及高度塌陷详解

2402_87276063的博客

10-26

528

浮动与清除浮动以及高度塌陷是前端开发中常见且重要的问题。通过深入理解浮动的概念、作用及其特性，以及掌握清除浮动的方法和解决高度塌陷的策略，我们可以更好地应对这些挑战，实现更加灵活和稳定的页面布局。在实际开发中，我们应根据具体需求和场景选择合适的解决策略，以确保布局的准确性和稳定性。希望本文能够帮助读者更好地理解和解决这些问题，提升前端开发能力。

常见的几种清除浮动（高度塌陷）的方法？

Problem_Girl的博客

01-16

1920

常见的几种清除浮动（高度塌陷）的方法？我们经常把解决高度塌陷问题叫做清除浮动。 高度塌陷问题------指父元素高度自适应（即父元素不设置高度或高度为auto，这时的父元素就靠子元素来撑开），子元素浮动float后，造成父元素高度为0的问题。 高度塌陷解决方法一：给父元素设置高度。缺点就是父元素无法高度自适应，因为子元素的高度不确定，若把父元素的高度定死，则一旦浮动的子元素高度大于父元...

html 清除浮动塌陷,伪元素清除浮动(父元素高度塌陷)

weixin_33068055的博客

07-01

183

由于浮用，事少来最差端在事路原们这制码效移，动动，绝对定位，使得元素脱离了标准文档流，对页面布局造成朋支不器几事为的时后级功发发来久都这样含制层是请些间例业多在上屏屏影响。由于浮动，不事时功来这制请例在屏随会和时实于幻近支父元素会产生高度塌陷，高度为0，如何清除浮动带来的影响，这就是能调页代事求都学是功发解开宗这维视如间请前框来总在行回断元随来以4移和泉果动标实效使“清浮动”。清浮动的方法遇新是直...

清除浮动（高度塌陷）的方法及原理！

钟阿能

10-25

1067

为什么要清除浮动？（清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题） 1.如下，我给父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子 2.当我给内部两个盒子加上float属性的时候顶部深蓝色盒子就会顶上来，然后父盒子因为没设置高度，变成一条线，big和small已经浮动了总结一下：当父元素不给高度的时候，内部元素不浮动时会撑开而浮动的时候，父元素变成一条线这时候很多人会想到新建

css 高度塌陷_导航条css clear清除浮动解决高度塌陷最终版

weixin_42362491的博客

12-28

145

63讲导航条css样式导航条*{margin:0px;padding:0px;}.nav{/*去除每个前的大圆点*/list-style:none;background:blue;width:1000px;margin:100px auto;/*解决高度塌陷*/overflow:hidden;}.nav li{float:left;width:25%;}.nav li a{/*是行内元素，必须变...

高度塌陷及清除浮动

qq_55663273的博客

08-11

179

高度塌陷问题及其解决方案（常见的几种清除浮动的方法及其优缺点）父元素没有设置高度，子元素浮动后导致父元素高度为0，就叫做高度塌陷问题 1、给父元素设置overflow:hidden;（实际应用较多）原理：给父元素设置overflow:hidden;触发了BFC(块级格式化上下文)的状态，闭合了子元素的浮动，子元素重新参与父元素的高度计算，父元素高度不再为0 缺点：显示在父元素框之外的部分会被隐藏 2、在浮动的子元素的末尾添加一个空div，并进行设置 .box{ clear: both; h

父元素的高度为0利用伪元素:after清除浮动可解决问题

09-25

在网页布局设计中，浮动（float）是一种常见的技术，它允许元素脱离其正常...在现代浏览器中，这是处理浮动布局导致的父元素高度塌陷问题的首选方案。而对于老旧浏览器的支持，我们仍需考虑添加`zoom: 1`这样的补丁。

浅谈CSS 高度塌陷问题

09-22

【CSS 高度塌陷问题详解】在网页布局设计中，CSS高度塌陷是一个常见的问题，它发生在父元素没有设置固定高度，而其内部的浮动子元素又导致父元素无法根据子元素高度自适应时。这个问题的核心在于，当子元素设置了...

float浮动造成高度塌陷的解决办法

weixin_42592145的博客

02-23

998

Float是我们在页面布局中常用的，也是非常重要的一个属性，可以让页面布局变得更加灵活。但是在继续学习之后，尤其是掌握了宽高自适应之后，我们常常会发现一个奇怪的现象：如果父元素没有设置高度，而子元素都浮动了的话，父元素就“瘪”了。就像下面这样 <html> <head> <meta charset="utf-8"> <title><...

CSS简介

k_k_kkh的博客

10-25

1328

p>CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。<p>在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。

CSS综合案例——新闻详情

k_k_kkh的博客

10-24

1311

如今，一个多世纪过去，“泰坦尼克号”的制造商哈兰德-沃尔夫终究也敌不过时代的锈蚀，不断挣扎后宣告破产。平民小伙的逆袭哈兰德-沃尔夫公司，正如它的名字所示，是由英国商人爱德华·哈兰德和他的助手、德裔英国人古斯塔夫·沃尔夫创立。<p>五年学徒工生涯结束后，哈兰德通过他叔叔的关系，结识了他此后的事业贵人、来自汉堡的德裔犹太商人施瓦贝。据哈兰德回忆，作为船厂的首席制图师，当时自己的周薪只有1英镑。他出生于英格兰约克郡的一个平民家庭，做医生的父亲在看病之余，还对工程发明有浓厚的兴趣，并拥有一项蒸汽动力车的专利。

探索 CSS Houdini：轻松构建酷炫的 3D 卡片翻转动画

一点一木

10-24

1345

本文通过构建一个 3D 翻卡动画深入探讨了 CSS Houdini 的强大功能，展示了如何通过 Worklets、自定义属性、Paint API 等扩展 CSS 的能力，实现高度灵活的动画效果。文章首先介绍了 Houdini 的核心概念与 API，并通过构建一个动态星空背景、圆形进度条以及交互式 3D 翻卡动画的实际示例，展示了如何利用 CSS Houdini 赋予网页设计更多创造力。最后，还演示了如何将这种 3D 翻卡效果集成到公司网站中，提升用户体验。

炫酷的登录框!(附源码)

m0_50864141的博客

10-29

1564

【代码】炫酷的登录框!(附源码)

CSS_定位_网页布局总结_元素的显示与隐藏

2301_80636070的博客

10-27

873

目录目标1. 定位1.1 为什么需要定位1.2 定位组成1. 定位模式2. 边偏移1.3 静态定位 static（了解）1.4 相对定位 relative（重要）1.5 绝对定位 absolute（重要）1.6 子绝父相的由来（重要）1.7 固定定位 fixed （重要）1.8 粘性定位 sticky（了解）1.9 定位的总结1.10 定位叠放次序 z-index1.11 定位的拓展1. 绝对定位的盒子居中2. 定位特殊特性3. 脱标的盒子不会触发外边距塌陷4. 绝对定位（固定定位）会完全压住盒子2. 综合

css 元素高度从0过度到auto的两种方案