css 子元素浮动后父元素没有高度导致页面变形的解决办法

最新推荐文章于 2022-11-08 14:11:04 发布
最新推荐文章于 2022-11-08 14:11:04 发布
阅读量175 收藏
点赞数
原文链接：http://www.cnblogs.com/SunSong/p/6700757.html
版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.par{
width: 100%;
height: auto;
border: 1px solid red;
}
.left{
width: 40%;
float: left;
height: 50px;
background: #A6E1EC;
}
.right{
width: 40%;
float: right;
height: 50px;
background: #D6E9C6;
}
.rest{
width: 100%;
margin-top: 10px;
background: #BBBBBB;
}
</style>
</head>
<body>
<div class="par">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="rest">我是下一個div</div>
</body>
</html>

变成了这样

 

修改后

 

<body>
<div class="par">
<div class="left"></div>
<div class="right"></div>

<div style="clear: both;"></div>//唯一改的地方 清除浮动
</div>
<div class="rest">我是下一個div</div>
</body>

 

转载于:https://www.cnblogs.com/SunSong/p/6700757.html

weixin_30493321
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决CSS高度塌陷
weixin_43905830的博客
04-03 257
什么是高度塌陷? 在文档流中，如果父元素没有设置高度父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高，但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。如： <!DOCTYPE html> <html lang="en"> <head> <meta charset="U...
CSS的宽高度自适应引起的高度塌陷解决，垂直对齐
weixin_46162015的博客
07-22 513
1.垂直对齐：在垂直方式设置元素的位置 应用场景：log垂直居中，下拉菜单垂直居中，控制文本与图片的位置 语法：vertical-align 属性值：middle/top/text-top/bottom/text-bottom/baseline middle【实现垂直居中】/te'xtext-top【重要】/text-bottom【文字的最下放】/top【line-height的最上方】/bottom【line-height的最下方】 2.实现不同大小lo...
Float（浮动）导致的父容器背景不显示的解决方法
06-08
Float（浮动）导致的父容器背景不显示的解决方法，两种方法，都试一下比较好
子元素设置浮动样式，父元素高度为0
风的专栏
01-30 1048
子元素如果设置了浮动样式，那么它就会脱离文档流，从而导致父元素高度变成0，当然不能说这是一个Bug，float的出现的初衷就是为了实现文字环绕图片来实现图文混排和流式布局，所以只能说这种情况只能是由于浮动样式的特性决定的。
浮动样式带来的父元素高度塌陷问题及解决办法
weixin_41174502的博客
03-30 445
首先什么是父元素高度塌陷呢？ 我们知道当对父元素里面的子元素开启浮动样式时，子元素就会原地上浮，不再受普通文档流控制，那么此时自然就不再受父元素控制了，而当父元素没有给定高度时，其高度都是由子元素撑开，若此时所有的子元素都浮动的话，父元素的高度就会塌陷为0。下面给个直观例子感受下： 一个ul里面有三个li,此时将父元素的高度注释掉，其高度完全由内容撑开。 ...
子元素设置浮动后，父元素高度为0的解决
陈梵的博客
01-29 2205
子元素设置浮动后，如果父元素没有给定高度，则会引起父元素的高度为0。 <div class="father"> <div class="son1"></div> <div class="son2"></div> </div> /* 子元素设置了浮动 */ .son1 { background-color: powderblue; float
关于子元素浮动父元素高度为零的解决办法
Bohehuangbo的博客
02-20 718
1.  额外标签法 这种方法就是向父容器的末尾再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的（而且通常是无语义的）标签。 2. 使用after伪类 这种方法就是对父容器使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”，因为它比较小不太引人注意。然后我们再利用它来清除
CSS学习
qq_58614993的博客
08-15 184
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
浮动布局【CSS】
wuxian_wj的博客
12-22 1297
1. 什么是浮动 浮动方式布局就是使用 float 属性，使元素脱离文档流，浮动起来。 浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。 1.1 特征 1.1.1 脱离文档流 脱离文档，也就是说浮动不会影响普通元素的布局。即其他div不会被设置浮动的div浮动位置影响，但是文字仍会为被浮动div让位。因为设置浮动的div只脱离了文档流并未脱离文本流。 从上图可以看出，默认三个设置了宽高的block元素，本来会格子独占一行；如果框1设置了向左/向右浮动，他会忽略框2和框3，直到碰到父元
html、css 实现网页布局（高度适应内容）
Zhangguohao666的博客
12-10 2727
利用html、css实现网页布局：两栏布局、三栏布局（浮动实现、定位实现）、后台管理系统的布局
解决父级元素因子级元素浮动导致的高度为0的问题
咖啡杯里的茶
03-09 346
我们在使用float浮动进行布局的时候知道一般需要给浮动的块元素加上一个父级元素，这样元素浮动时才可以在父元素内部按照我们需要的方式进行布局，但是有一个问题是如果父元素没有给定高度的话当内部元素进行浮动之后父元素的高度就会是0，这是因为浮动的元素是处于标准流之外的。若是在一开始给定父元素一个高度的话很多时候也不能满足要求，因为很多我们不知道要显示的内容具体是多少，所以也就不知道需要给多少高度合适。...
css之子元素浮动导致父元素高度塌陷解决方案
normol的博客
10-20 3730
问题引入：在制作导航栏时，若父元素ul不给出高度的具体数值，只给背景。而子元素li又用到了float:left。 那么，这种情况就会导致父元素的背景“消失”，因为浮动元素脱离文档流，不占据空间，因此相当于父列表没有内容。 解决方案： 一：添加进行清理浮动的元素（但书中说，这会在页面中增加不必要的标记，不建议用这种方法）。 二： （1）使父元素也添加float （2）使父元素posati
解决子元素的浮动导致的父元素高度坍塌的问题
dcfsdf43243的博客
08-09 833
参考：https://blog.csdn.net/qq_42129063/article/details/80441069 当父元素中的子元素设置了float属性时，可认为子元素就跳出了父元素的束缚而位于新的一层，此时父元素内部没有元素，其高度就变为0。要解决这个问题，人为给父元素设置高度是不现实的，因为一般父元素的高度是由子元素决定的，为此我们可以从父子元素两个角度出发，用两种思路解...
前端黑科技-解决所有的子元素浮动后父元素高度变为0，且影响后续元素
努力推石头的西西弗斯
05-29 330
1)为父元素指定overflow:hidden;——有副作用 2)为父元素指定高度：height: xxx;——有局限性 3)为父元素添加后置内容生成——推荐使用 .parent:after { content: ' '; display: table; clear: both; }
img填满父元素
10-08 1531
当给父元素设置relative属性，display为block，设置一个padding-top值，给子元素img设置absolute，top为0，left为0，width100%，height100%，img元素就会填满父元素，高度为padding； 元素的margin和padding的百分比 是根据父元素的width来的 :before伪类的margin和padding百分...
子元素浮动后,父元素被挤到下面了,变态的IE6
大人的技术博客
09-15 611
Title html * {margin:0px;padding:0px;} ul {background:#f0f;z-index:1;overflow:Hidden;} ul li {float:left;width:96px;overflow:hidde
浮动产生的高度塌陷问题
weixin_48864616的博客
10-13 138
浮动产生的高度塌陷问题 高度塌陷产生的原因 因为浮动后脱离文档流，所以如果一个父元素中所有的子元素都浮动，则相当于这个父元素中没有写东西，父元素高度就会变成 0，从而导致下方的布局错乱，这个问题叫高度塌陷 解决高度塌陷的问题 增加空标签 增加空标签会导致html结构发生变化 <div class="box"> <div class="item"></div> <div class="item"></div> <div
解决子级用CSS float浮动 而父级div没高度不能自适应高度
最新发布
Web_boom的博客
11-08 492
##方法三：对父级样式加overflow样式 此方法非常简单，也可以作为推荐解决父级不能被子级撑开自适应高度的方法，可以不增加div盒子对象，只需要对父级加一个overflow:hidden样式即可。整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。当一个div的子级用了float浮动时，这个div的高度就不受子级div高度的影响了。
浮动、定位、伪类、伪元素
ordinaryzry的博客
04-16 483
浮动、定位、伪类、伪元素
CSS浮动清除方法详解：解决父元素高度问题
总结来说，CSS清除浮动是为了修复由于浮动元素造成的布局问题，通过传统方法、设定高度、使用`clearfix`或者采用现代布局模型，开发者可以根据项目需求选择最适合的方式来管理浮动元素，保持良好的页面结构和响应式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值