CSS 高度塌陷解决方法

最新推荐文章于 2024-08-12 18:14:21 发布

Waste~

最新推荐文章于 2024-08-12 18:14:21 发布

阅读量224

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/Mr_box_/article/details/117532604

版权

浮动元素导致了父元素高度塌陷，影响了背景颜色、边框显示及同级子元素布局。解决方法包括：1) 给父元素定义高度；2) 使用伪类`:after`；3) 设置`overflow：auto`。

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

浮动主要造成了父元素高度塌陷，以至于父元素很多像背景颜色，边框等都不能正确的显示出来以及同级子元素的位置

我们先来看一下正常高度塌陷效果

.wrapper-min{
   
    width: 300px;
    border: 3px solid black;
    background-color: yellow;
	
}
.wrapperdzy{
   
    width: 50px;
    height

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Waste~

关注关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS 中的高度坍塌

zwkkkk1的博客

04-11

1264

首先，抛出一段代码引出本篇的主题：CSS 中的高度坍塌。 ps：代码可以复制出去运行哦~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>高度塌陷</title> &lt

CSS高度塌陷的8种方法以及优缺点

sdasadasds的博客

06-16

471

高度塌陷的触发条件：父元素没有设置高度，且所有的子元素都浮动之后，因为子元素悬空不占位的，所以父元素的高度为0，会影响到后面的标签，也会影响页面布局。高度塌陷的解决方法有很多种，以下是跟大家整理的8中解决方法，以及优缺点，有需要的自取。1.父级div定义 height 原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。优点：简单、代码少、容易掌握缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题建议：不推荐使用，只建议高度固定的布局时使用2

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

CSS高度塌陷问题解决方案

weixin_30532759的博客

08-27

523

高度塌陷的存在：原因分析 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style type="text/css"&gt...

css中的高度塌陷

最新发布

Lil_y1的博客

08-12

692

解决css中的高度塌陷

css处理高度塌陷问题的方法

weixin_66566196的博客

03-05

238

对于初学者简单好理解的两种方法处理高度塌陷的问题

css解决高度塌陷的方法

空之境界

03-01

303

一.BFC的概念 BFC，全称Block Formatting Context，翻译成中文就是块格式化上下文，Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context ...

浅谈CSS 高度塌陷问题

09-22

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

CSS高度塌陷及其解决方法

weixin_42040512的博客

03-01

749

最近在做一些实例练习时，总会发生一些高度塌陷的问题，在这里详细介绍一下高度塌陷及其解决方法。一、CSS高度塌陷问题在文档流中，父元素如果不设定高度，那么它的高度就由子元素来决定，由子元素的内容来将父元素撑开。例： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <...

css高度塌陷及解决方法

summer_567的博客

01-30

386

css高度塌陷及解决方法为什么会出现高度塌陷？ 1.父元素高度自适应，子元素 float 后，只要子元素脱离了文档流后，造成父元素高度为0，称为高度塌陷问题。 2.在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。解决方法 1.最简单的解决方式就是给父容器设置一个固定的高度劣处：给父元素设置固定高度后，就不能进行高度自适应 2.给父元素也设置浮动劣处：（1）虽

css高度塌陷问题的解决方案

11-21

1. 高度塌陷 在文档流中，父元素的高度默认被子元素撑开，也就是说子元素多高，父元素就多高。但是，当为子元素设置浮动后，子元素会完全脱离文档流。此时，将会导致子元素无法撑起父元素的高度，导致父元素的高度...

【CSS解决页面高度塌陷问题】

橙子的博客

04-27

1500

高度塌陷问题描述1、页面高度塌陷问题(1)产生原因(2)正常标准流盒子(3)子盒子浮动(4)归纳总结1.1、清除浮动本质1.2 、清除浮动的方法(1)方法一：额外标签法(2)方法二：给父级添加overflow属性方法①一个BFC的小知识(3)方法三：使用after伪元素清除浮动(4)方法四：clearfix类解决高度塌陷（推荐）1.3、一个常用布局框架实例 1、页面高度塌陷问题 (1)产生原因我们都知道当元素浮动后，可以左右移动，直到遇到另一个浮动框或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，

CSS中如何解决高度塌陷

ghjkfuihg的博客

07-20

241

CSS中如何解决高度塌陷

CSS高度塌陷问题及解决方法

qq_45799465的博客

01-23

5102

触发条件包含结构,所有的子元素浮动,且父元素没有设置高度,就会触发父元素高度塌陷。例如：解决方法一：给父元素添加固定高度。缺点:不适合高度自适应的布局。代码： <style> *{ margin: 0; padding: 0; } ul{ /* 给父元素设置固定的高度 */ height: 600px;

css高度塌陷及其解决方法

YumEllen的博客

11-30

277

高度塌陷 一、什么是高度塌陷 在文档流中，当父元素没有设置高度的时候，父元素的高度就取决于子元素的高度，也就是常常说的“由子元素撑开”。当子元素设置为浮动，脱离了文档流，这时候就会造成父元素的高度塌陷，因为没有子元素“撑着它的高度”。这样会导致父元素后面的元素往上移，造成布局混乱。那么应该怎么解决咧？二、解决办法在后面增加空的子元素，设置clear:both 要注意这个清除浮动的对象并不...

CSS-高度塌陷布局乱问题详解

主营前端方向，技术栈是vue

11-15

1022

高度塌陷布局乱问题(子元素浮动无法撑起父元素高度、方法1zoom、方法2clear: both清浮动、方法3after伪类添加空白元素清除浮动、最终方案clearfix)

CSS解决高度塌陷的各种方法

weixin_47492981的博客

05-11

430

在文档流中，父元素的高度默认是被子元素撑开的，子元素多高父元素就多高，当子元素设置浮动之后，子元素会完全脱离文档流，此时会导致子元素无法撑起父元素的高度，从而使父元素的高度塌陷 方法一：在父元素中加入overflow:auto，打开BFC即可，或者加入overflow:hidden 方法二：用clear属性来清除其他浮动元素对当前元素的影响，clear里面的值分别为left（清除左侧浮动）、right（清除右侧浮动）、both（清除左右两侧浮动）、none（默认值，允许浮动元素出现在两侧）、inheri

CSS高度塌陷问题-六种解决方案

m0_53206841的博客

04-26

5726

问题背景子元素浮动后，无法撑起父元素高度，导致父元素高度丢失，其下元素会自动上移，导致页面布局混乱解决方案一、BFC 块级格式化环境（Block Formatting Context） BFC是页面元素的一个隐藏属性，默认是关闭的，开启BFC该元素会变成一个独立的布局区域。区域内的元素不会影响区域外的元素. 开启BFC后的特点： 1、开启BFC的元素不会被浮动元素覆盖 2、开启BFC的元素子元素和父元素外边距不会重叠 3、开启BFC的元素可以包含浮动的子元素开启BFC方式： 1、