浮动 ，高度塌陷的解决方法 ，边框

最新推荐文章于 2025-05-20 10:04:41 发布
原创 最新推荐文章于 2025-05-20 10:04:41 发布 · 185 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#浮动 #高度塌陷的解决方法 #边框

本文主要介绍了CSS中浮动(float)属性的基本用法及其可能导致的高度塌陷问题，并提供了一种通用的清除方法来解决这一问题。通过使用伪元素after并设置clear:both样式可以有效地避免父元素高度塌陷。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.浮动：float
默认值：none 没有浮动
left:左浮动 right右浮动
浮动
2.高度塌陷的解决方法（万能清除法）：
选择符（高度塌陷的元素）：after{content:"." ;display:block;height:0;clear:both;
overflow:hidden;visibility:hidden;}

3.边框
边框

Lgw_zuiyouxiu
关注
CSS-float浮动和高度塌陷问题详解
主营前端方向，技术栈是vue
11-21 1102
float浮动和高度塌陷问题详解(基本属性、环绕、脱离文档流撑开内容，子浮父塌页面混乱，法1开zoom，法2clear:both，最终方案多功能clearfix)
浮动的高度塌陷
cj1555640的博客
08-10 285
java学习第13天：浮动的高度塌陷
CSS——浮动&清除浮动（防止高度塌陷）
最新发布
irotoru的博客
05-20 174
语法：float: right/left/none;。作用：浮动元素会脱离标准流（简称：脱标），在标准流中不占位置浮动元素无法通过margin实现水平居中，因为浮动生效的权力更大。
HTML----浮动(高度塌陷)
weixin_44089259的博客
09-04 315
定义 浮动:通常无法左右排列，则设置了浮动的元素会往左或者右移动，直到遇到另一个元素或者外边距 float:left/right; 高度塌陷问题 子元素书写浮动属性后，父元素会产生高度塌陷的问题，也就是福原属高度为0的现象。 解决方法 1、直接书写父元素高度-----必须是模块高度不会改变的情况下（不提倡） 2、给父元素书写溢出隐藏属性:（经常） overflow: hidden 3、在最后一...
解决浮动引起的高度塌陷
weixin_34363171的博客
02-20 137
当不给父元素设置宽高时，父元素的宽高会被子元素的内容撑开。但是当子元素设置浮动属性后，子元素会溢出到父元素外，父元素的宽高也不会被撑开了，称之为“高度塌陷”。 <div class="container"> <div class="box_1 float">box 1</div> <div class="box_2 float"&...
浮动造成的高度塌陷问题
sherlock9866的博客
06-04 294
浮动可以解决一些很古怪的间隔问题，但是浮动也可能造成父盒子的高度塌陷问题。 首先明确，什么是高度塌陷。 我们先来看一个显示正常的情况： <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> .parent{ ...
详解关于浮动元素float使其父元素高度塌陷的原因及解决方法
11-21
然而，这种技术带来了一个问题，即浮动元素可能会导致其父元素的高度塌陷，也就是父元素无法正确地包含浮动的子元素，从而在视觉上看起来父元素的高度消失了。 浮动元素的特性之一是“脱离文档流”。这意味着当一个...
父级元素未设置高度和宽度时高度塌陷问题的解决方法
12-13
解决“高度塌陷”有多种策略，下面将详细介绍其中三种常用的方法： 1. **浮动父级元素** 这种方法较为奇特但确实有效。通过设置父级元素的浮动属性，如`float:left`或`float:right`，可以使其高度自动扩展以包裹...
css浮动中避免包含元素高度为0的4种解决方法
09-25
通过给ul标签添加height属性，可以解决高度塌陷的问题。例如，设置ul的高度为300px。然而这种方法的缺点很明显，父元素的高度不能根据子元素的多少自适应变化，一旦子元素数量增多或减少，父元素的高度可能不再合适...
CSS浮动之高度塌陷
Rogersen的博客
02-23 393
CSS浮动之高度塌陷 浮动二字，顾名思义，就是让一个元素飘着、浮着，使之脱离文档流；它的作用就是让竖着排的元素横向排列。实例：2个div标签 浮动之前： 浮动之后 浮动的属性值：左浮动：float:left; 右浮动：float:right; 默认值：float:none; 接下来我们来谈谈元素浮动之后出现的高度塌陷的问题。 所谓浮动造成的高度塌陷，就是在父元素没有设置高度的情况下，其子元素...
浮动及高度塌陷
qq_69761234的博客
05-03 306
浮动 块元素在文档流中默认是垂直排列， 如果希望块元素横向布局，可以用float float 可以使元素浮动，向父元素的左侧或右侧浮动，脱离文档流 可选值： none 默认值 不浮动 left 像页面的左侧浮动 right 像页面的右侧浮动 浮动的特点 1:浮动元素脱离文档流之后，不会再占有文档流的位置，它下边的元素会立即向上移动 2:元素浮动之后，元素会尽量的向页面的左上或...
CSS 浮动高度塌陷问题及清浮动
sepgit的博客
11-13 206
出现原因： 子元素浮动，父元素无浮动且高度为自动（也就是没有设置高度） 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Index</title> &lt
浮动高度塌陷和布局外边距合并塌陷解决方案
qq_43639998的博客
10-19 305
解决浮动和设置外边距带来的布局异常的方法
[CSS学习笔记]浮动和高度塌陷
weixin_45369645的博客
08-10 347
CSS属性float设置容器的左侧或右侧的元素，使文本和内联元素环绕它。尽管仍保留了流的部分，但该元素已脱离了文档流。 CSS Demo: float Syntax /* Keyword values */ float: left; float: right; float: none; float: inline-start; float: inline-end; /* Global values */ float: inherit; float: initial; float: unset; values
CSS浮动后的高度塌陷问题
m0_54495694的博客
06-29 275
高度塌陷： 在浮动的布局中，父元素的高度默认被子元素撑开 当子元素浮动后，会完全脱离文档流，子元素从文档流中脱离 将无法脱离父元素的高度，导致父元素的高度丢失 父元素高度丢失后，其下的元素会自动上移，导致页面的布局混乱 所以高度他先是浮动布局常见的问题，且必须进行处理高度塌陷解决办法 BFC（Block Formatting Context）块级格
解决由float引起的“高度塌陷”问题
努力码代码的程序媛小艺
09-07 1241
“高度塌陷”是指父元素未设置高度和宽度，而且其只包含浮动的子元素时，该父元素的高度会产生“塌陷”.换言之，当元素不具有实际高度时，就会产生“高度塌陷”。 解决“高度塌陷”问题的方法有如下几个： 1.在父元素结束前加一个高度为0，宽度为0，且clear:both的div。当然如果有未浮动的子元素，可以直接clear:both。 块1 块2 块3 .lef
浮动、高度塌陷、以及其解决办法
qq_42453238的博客
05-10 547
 1.什么是浮动？ 浮动(float)： 依然位于父元素内 脱离文档流，形成BFC，但不脱离文本流。即float元素下面的文字依然会被挤出去。 变为块级元素 — 块级元素：允许修改尺寸 。行内元素：不允许修改尺寸 父级元素内的文本，行内，行内块元素采用环绕方式排列  2.浮动 之后会有什么样的影响？ (高度塌陷)** 由于浮动元素会脱离文档流，所以导致不占据页面空间，所以会对父元素高度带来一定影响。如果一个元素中包含的元素全部是浮动元素，那么该元素高度将变成0（高度塌陷）  3.如何清楚浮动？ #方
CSS浮动清除方法详解：解决父元素高度问题
另一个清除浮动的方法是直接给父级`div`设置一个固定的非塌陷高度，包括边框在内的总高度。这可以避免浮动元素的影响，但存在局限性，因为一旦内部浮动元素的高度发生变化，可能需要手动调整高度。例如： ```css ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值