子盒子浮动，父盒子清除浮动高度内容撑开

最新推荐文章于 2023-04-26 17:05:49 发布
最新推荐文章于 2023-04-26 17:05:49 发布
阅读量275 收藏 1
点赞数
分类专栏： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45397914/article/details/118862578
版权

     清除浮动的方法本质分为两种，一种为额外标签法，一种父盒子加overflow。

  • 额外标签法又有两种情况。
    • 父级盒子加一个空元素
	  <div class="father">
			<div class="son"></div>
			<div class="son"></div>
			<div class="clearfix"></div>
		</div>

 	.father {
   
				width: 400px;
				background: pink;
			}
	.son {
   
		width:
最低0.47元/天 解锁文章
zmh_vicky
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
盒子模型&浮动
qq_39249908的博客
06-29 558
盒子模型 盒子模型的组成：content（内容）、border（边框）、padding（内边距）、margin（外边框）。 对边框border的设置：边框宽度、边框样式、边框颜色。 边框宽度：border-width value以像素为单位。 边框样式：border-style value有none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。常用的有solid、dotted、dashed三种。 边框颜色：border-color
解决子容器全部浮动时父容器高度不能自动撑开的方法
09-25
刚入门网站设计布局的开发者肯定会碰到这样的问题，那就是当子容器全部浮动的时候，父容器的高度不能自动撑开,今天偶也遇此问题，需要了解的朋友可以参考下
CSS-子盒子撑开父盒子，让父盒子的高随内容自适应
weixin_30401605的博客
02-10 2376
方法一： height:auto!important;height:200px;min-height:200px; ie6并不支持min-height。ie7,opera,火狐没有问题。 方法二： 在浮动的容器后面，父容器结束之前加入一个空的div，并清除浮动。 <div class="father"> 　　<div class="son"&...
小程序定位引起view高度不能由内容撑开的问题？
weixin_44058522的博客
09-03 2786
注：#getheight为view绑定的id命名 // 获取view的高度 windowWidth: ‘’, scroll_height: ‘’, // 获取系统宽度 getSystemInfo: function() { let that = this wx.getSystemInfo({ success: function(res) { console.log(‘res.windowWidth...
自主学习Html+CSS第六天+CSS定位
08-16 441
文章目录CSS定位一.清除浮动1.为什么要清除浮动2.清除浮动本质3.清除浮动的方法二.定位(position)1.为什么要用定位？2.元素的定位属性1、边偏移2、定位模式(定位的分类)1丶静态定位(static)2丶相对定位relative(自恋型)3丶绝对定位absolute (拼爹型)3.绝对定位的盒子水平/垂直居中4.固定定位fixed(认死理型)5.叠放次序（z-index）6.四种定位总结7.定位模式转换 CSS定位 一.清除浮动 人生就像乘坐北京地铁一号线： 途经国贸，羡慕繁华； 途经天安门，
父div中的盒子全部是浮动盒子的处理方式
闲谈
01-16 412
代码类似这样的处理方式:               div {                 margin:20px 20px 20px 20px;                 border:solid 1px;                 background-color:yellow;                 padding:0px;             ...
css子盒子撑开父盒子溢出情况
who_become_gods的博客
07-02 841
属性 height: fit-content; 有时候也可以设置width (前提是没有设置width 写死) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid.
给子盒子设置padding值是不会撑开父盒子的
qq_37621289的博客
09-25 6102
最开始有如下一张图 大标题看起来离下边框太近了，所以想利用h4标签的padding-bottom将它们的距离调得远一些。现在就是有一个疑问，如果将h4的padding-bottom设置成10px,那大盒子会不会被撑大呢。测试结果如下所示： 没有设置padding时，父盒子和子盒子的大小如下： 给h4标签添加padding-bottom:10px;属性之后，显示结果如下： 可以看到父盒子的...
父元素的高度为0利用伪元素:after清除浮动可解决问题
09-25
当一个父元素内的所有子元素都设置了浮动，如果没有指定父元素的高度，那么父元素的高度会自动塌缩到0，因为它不再包含这些浮动的子元素。这可能导致父元素背景颜色、边框等无法正确显示，甚至影响到页面其他部分的...
CSS的clear属性清除浮动的基本用法示例
09-24
浮动元素会导致它们的父容器高度无法自动扩展以包含它们，从而可能导致内容溢出并影响其他元素的布局。`clear`属性的作用就是确保一个元素不与任何浮动元素相邻，从而避免这种“浮动溢出”的情况。 **什么是CSS清除...
css 完美清除浮动的两种解决方案
09-27
然而，浮动元素的一个副作用是它们可能会导致其父元素的塌陷，即父元素无法正确包裹住浮动的子元素，从而影响到后续元素的布局。为了解决这个问题，我们通常需要“清除浮动”。本文将介绍两种常见的清除浮动的方法：...
浅谈css中浮动和清除浮动带来的影响
09-27
这是因为浮动元素不再占用父元素的高度，使得父元素无法根据其内容自动调整高度，从而可能导致父元素的高度不足，无法完全包裹住浮动的子元素。这在多列布局中尤为明显，可能会造成下方元素提前出现在预期位置之上。...
css关于子级盒子浮动与不浮动的覆盖关系
m0_62641005的博客
02-20 1267
问题：我们知道浮动经常使用在父级为标准流的盒子里面添加子级元素，需要注意的是，如果子级元素中存在一个浮动的话，那么其它的子级盒子都需要浮动，否则就会发生覆盖等问题了。 下面根据CSS和大家演示下 <body> <div> <div class="one">粉色</div> <div class="two">绿色</div> <div class="three">黄
css父盒子没有高度让子盒子撑开 且子盒子有浮动 清除浮动
延宾的博客
05-05 7018
无标题文档 .box{ width:300px;margin:0 auto;border:10px solid #000;} .div{ width:200px;height:200px;background:red;float:left;} .clear{ height:0px;font-size:0;clear:both;} /*     清浮动     1.给父级也加浮动
CSS子元素浮动父元素自动撑开
RainSun
05-08 6497
问题 一般是父盒子中的子盒子使用了CSS float浮动属性，导致父级对象盒子不能被撑开，这样CSS float浮动就产生了。 如下图所示： &amp;lt;div style = &quot;border:1px solid black;&quot;&amp;gt; &amp;lt;div style = &quot;border:1px solid red;float:left;width:100px;height:100px;&qu
浮动元素与父盒子、兄弟盒子的关系
weixin_47183545的博客
05-11 1111
1.浮动元素与父盒子的关系：子盒子的浮动参照父盒子对齐；不会与父盒子的边框重叠，也不会超过父盒子的内边距。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .father { width: 500px; height: 500px; background-color: pink
页面布局之盒子模型——内容与边框（overflow，border：none，border-collapse）
Ahua_Core的博客
08-14 673
页面布局之盒子模型——梗概看透页面布局的本质盒子模型的组成元素一、content 内容content的必要性content的属性元素二、border 边框border相关属性border：none与border:0border-collapse：collapse 看透页面布局的本质 经常听说，网页布局实际上就是一个又一个盒子堆砌排列起来。这些盒子里面装了我们要用的东西。CSS则是给盒子加上修饰包装，让盒子变得好看美观。 任何元素都可以看作是一个盒子。 盒子模型的组成 首先了解盒子模型的组成，包括以下四部分
CSS - 实现容器溢出后隐藏滚动条并且能正常滚动，盒子高度超出后不显示滚动条但是能正常滚动（附带详细示例，完美解决方案）
王佳斌
04-26 4942
css 怎么不显示滚动条还能滚动，CSS 实现隐藏滚动条同时又可以滚动，css如何隐藏垂直滚动条但同时需保持滚动，css-滚动但不显示滚动条的两种写法，CSS 实现隐藏滚动条同时又可以滚动 ，css滚动条(css不显示滚动条但可以滚动)，css设置去掉滚动条依然可以滚动，CSS 隐藏滚动条 但可以滚动，CSS 实现隐藏滚动条同时又可以滚动的代码，css - 如何隐藏滚动条但又能滚动,不用js实现，css 隐藏滚动条,但仍然能滚动，css设置Overflow实现隐藏滚动条的同时又可以滚动，如何在不显示滚动条的
SQL服务器修改服务器排序规则方法
最新发布
07-17
SQL服务器修改服务器排序规则方法
清除子元素浮动对父元素的影响
05-31
清除子元素浮动对父元素的影响可以通过以下两种方式实现： 1. 使用clearfix清除浮动 在父元素的CSS中添加如下代码： ``` .clearfix::after { content: ""; display: table; clear: both; } ``` 然后在子元素...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值