CSS中的float 以及父元素塌陷问题解决

最新推荐文章于 2024-08-11 11:01:02 发布
最新推荐文章于 2024-08-11 11:01:02 发布
阅读量645 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： JavaWeb Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_36418170/article/details/92561636
博客介绍了float属性，其可让行内元素变为块级元素并脱离正常位置排列，但会占据文本空间。若父元素未设高度，浮动元素脱离原始位置会导致父元素塌陷。同时给出解决方法，如手动添加高度、用clear清除浮动、添加overflow属性结合zoom使用、给父元素添加浮动。

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

folat：left | right | none | inherit

  • 作用： 可以让行内元素变为块级元素， 脱离正常位置进行排列，原占据的空间不存在，但会占据文本空间
  • 副作用： 如果父元素没有设置高度，因为浮动的元素已经脱离原始的位置，父元素检测不到子元素的大小，会产生父元素塌陷问题，也就是父元素不具有高度

解决父元素塌陷问题的方法：

  1. 手动给父元素添加高度
  2. 通过clear清除内部和外部浮动 ： clear: right | left | none | both
  3. 给父元素添加overflow：hidden属性并结合zoom：1使用： overflow:hidden | auto用于处理溢出元素的问题
  4. 给父元素添加浮动
CSS-float浮动和高度塌陷问题详解
主营前端方向，技术栈是vue
11-21 1102
float浮动和高度塌陷问题详解(基本属性、环绕、脱离文档流撑开内容，子浮父塌页面混乱，法1开zoom，法2clear:both，最终方案多功能clearfix)
float产生的高度塌陷问题解决方案（包含全部方法)
surymy
12-29 2808
一、什么是高度塌陷 高度塌陷问题是f元素loat后很容易产生的一种现象，具体原因是： 在设计网页时，父元素的高度一般不会被写死，我们希望它会根据子元素的内容多少自动变化。 但是在浮动布局中，父元素的内容高度默认是被子元素撑开的，但子元素浮动后，便脱离了文档流，因此无法撑起父元素，从而导致父元素高度丢失。之后父元素下边的元素会自动上移，导致页面布局混乱。 二、解决方法 把父元素高度写死（闭环了属于是）推荐指数：0 BFC（Block Foematting Content）：块级格式化环境 clear：清除浮
css中关于父元素浮动塌陷的常用解决办法
01-08
清除父元素塌陷 1 2 3 4 5 第一种方法,设置父元素的宽高 #fatherDiv{ border: 1px solid red; width: 120px; height: 30px; } .sonDiv{ border: 1px solid black; width: 20px; height: 20px; line-height: 20px; text-align: cen
css学习笔记之解决父元素塌陷问题
桥头落日的博客
03-14 213
## 父元素塌陷解决问题 1，问题： 1，调整父元素大小 2，在div后加一个空div 3，在父元素中加overflow: hidden; 4，在父元素后加 #father:after{ content: ''; display: block; clear: both; } ...
css解决子元素float浮动父元素坍塌的问题
IT菜鸟
06-17 983
一、坍塌产生的原因 因为浮动元素从文档流中移除，父元素处在正常流中，所以父元素不能被浮动元素撑大。 浮动元素脱离正常流，意思是布局时后面元素当它不存在（文字还是当它存在，环绕其身边），但仍然在dom树上。 二、坍塌解决方案 1. 参考在浮动布局情况下，让父级获得合适的高度 /*方法1. 浮动的父级设置高度*/ super { height: npx; } /*方法2. 浮动的...
关于css中父元素塌陷问题以及解决办法
军火库
02-03 934
主要记录下经典的父元素塌陷问题，在开发过程中如果碰到相关问题，可以联想到这几种解决办法，更好的去优化代码。最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
css 子元素设置float,父元素高度塌陷
weixin_33770878的博客
05-22 160
以div元素为例。div元素的高度会通过内容自动撑开。也就是说，内容有多少，高度就有多高。但是当内部元素设置了float属性之后，会是父元素高度塌陷 <div class="container"> <p>Hello World!Hello World!</p> <div class="clearfix"><...
详解关于浮动元素float使其父元素高度塌陷的原因及解决方法
11-21
总的来说，浮动元素导致的父元素高度塌陷是CSS布局中的一个经典问题。通过理解浮动元素的特性，以及掌握上述的解决方法，开发者可以有效地处理这个问题，创建出稳定且符合预期的网页布局。在现代前端开发中，虽然有...
css中float:right右对齐元素会换行不在同一条线上
09-25
在CSS（层叠样式表）中，浮动（float）属性是一个非常重要的布局工具，它允许开发者将块级元素沿着容器的左侧或者右侧排列。通常，我们会用这个属性来实现文本环绕图片的效果，但现在任何元素都可以应用浮动，不仅仅...
css--父元素塌陷
anhuan7634的博客
09-09 171
　　当父元素内都是漂浮元素时，会造成父高度塌陷的问题。(因为等同于父元素内容为空，所以长，宽都等于空) 　　我们想要的页面结构是： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title<...
【CSS】父级边框塌陷问题解决方案
Carroll的博客
07-09 986
代码示范 <body> <div id="father"> <div class="layer01"><img src="img/1.jpg" alt=""></div> <div class="layer02"><img src="img/2.jpg" alt=""></div> <div class="layer03
css样式float浮动后，父元素塌陷解决方法
九九极客云
12-14 623
当父元素里面的内容有浮动的时候，如果这个父元素没有设置高度和宽度的时候，就会导致父元素塌陷，即没设置高度时，父元素会变成一条线。在这里我们可以称为“塌陷”。如下例子：box父元素没有设置高度，只设置边框，它的子元素box1，box2设置宽高、背景颜色、左浮动。 代码如下： <!doctype html> <html> <head> <meta charset="utf-8"> <title>css容器浮动塌陷</title> <s
[css] 为什么float会导致父元素塌陷
歌谣的博客
01-18 273
[css] 为什么float会导致父元素塌陷 “当元素设置浮动后，会自动脱离文档流”， 翻译成白话就是说，元素浮动后，就不在整个文档流的管辖范围，那么它之前存在在父元素内的高度就随着浮动不复存在了，而此时父元素会默认自己里面没有任何内容 （前提是未给父元素设置固定高度，如果父元素本身有固定高度，就不会出现这种情况） 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
【css】浮动 解决父级边框塌陷问题的四种方法 display float overflow
最新发布
m0_66584716的博客
08-11 1116
指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式。父级添加overflow属性（简单，但是下拉列表框的场景不能用）内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立。设置父元素的高度（简单，但是固定高度会降低扩展性）inline-block和float的区别。/*在clear类后面添加内容为空*//*把添加的内容转化为块元素*//*清除这个元素两边的浮动*/（简单，但是会造成代码冗余）内联元素（inline）（复杂，但是没有副作用）
【前端开发】CSS父元素边框塌陷问题
一个记录积累的地方
03-09 407
文章目录前言解决办法方法1：增高父元素高度方法2：清除父元素部分浮动或添加清除浮动的元素方法3：overflow:hidden方法4：给父类添加一个伪类:after（推荐使用） 前言 在使用float属性时会经常遇到父级元素的边框塌陷的问题，会造成严重的排版问题，如图所示。 使用float前 使用float后 解决办法 方法1：增高父元素高度 .father{ border: 5px solid salmon; height: 110px; } 缺点：高度是定死的，需要不断调整，容易出问
CSS解决父元素坍塌的问题
qq_32600929的博客
10-22 1934
在涉及到浮动的时候，有时候会出现父元素“坍塌”的情况，类似这样： .all{ border:1px solid red; } .box{ width:100px; height:100px; border:1px solid blue; padding:20px; margin:10px; float:left; } box1 box2
HTML css解决高度塌陷的方法
HTML5_student的博客
02-29 553
高度塌陷是HTMl中常见的问题，今天简单的整理一下在 逆战班 学习的几种方法来解决高度塌陷。 什么是高度塌陷：在文档流中，父元素的高度默认是被子元素撑开的也就是子元素多高父元素就多高，但为子元素设置浮动以后，子元素会完全脱离文档流此时将导致子元素无法撑起父元素高度，导致父元素塌陷，父元素下的元素都会向上移动 会导致布局变乱。 例：先设置3个如下div <div class="box1"&gt...
css 父级margin塌陷
JackLiu16的博客
09-01 464
參考： https://study.163.com/course/courseLearn.htm?courseId=1004165002#/learn/video?lessonId=1048131017&amp;courseId=1004165002
CSS样式常见问题：父元素下移，父元素高度塌陷，居中对齐，元素隐藏
weixin_48480995的博客
02-25 634
CSS样式常见问题：父元素下移，父元素高度塌陷，居中对齐，元素隐藏
CSS中float导致父div高度坍塌的问题分析
总结来说，CSS中的浮动布局提供了灵活性，但也带来了一些问题，如父元素高度塌陷。通过理解清除浮动的原理和方法，开发者可以更好地控制布局，创建出更加美观和功能完善的网页。在进行网站设计和开发时，掌握这些...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值