父级设置了float，子元素不显示了

最新推荐文章于 2020-11-24 10:13:57 发布
最新推荐文章于 2020-11-24 10:13:57 发布
阅读量823 收藏
点赞数
分类专栏： DIV+CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Eric_Tsai/article/details/43307963
版权
今天在学习psd切图转换成html的时候，我为父元素<div>设置了float：left，为子元素设置了背景图片，宽和高，当我F12查看网页的时候，发现没有出现预料的结果，而是不显示子元素的背景图片。各样的清除浮动，都不行。随后仅仅为父元素设置了合适的宽度，子元素就显示了。特此记下，以备同样的初学者参考
Eric_Tsai
关注
专栏目录
记一个子元素float:left后父元素高度无法撑开的问题
蛐蛐的博客
08-19 567
1.简介 当子元素使用float:left时，它会脱离正常的文档流 既然它脱离了正常的文档流，而父元素还在正常的文档流中，那么它自然就无法撑起父元素的高度了 <html> <head> <style> body > div{ } body > div > div{ float: left; ..
css等比例分割父级容器（完美三等分）的实现
11-19
这是最传统的方法，通过设置子元素的`float:left`和宽度百分比来实现等分。例如，对于三个子元素，我们可以设置每个子元素的宽度为`33.33%`。然而，这种方法存在一个问题，由于浏览器的解析差异和边距、边框的影响...
Float（浮动）导致的父容器背景不显示的解决方法
06-08
Float（浮动）导致的父容器背景不显示的解决方法，两种方法，都试一下比较好
css清除浮动的几种方法_清除浮动的几种方法
weixin_39849287的博客
11-24 109
标准流：盒子会各占整行位置。子盒子若是标准流，父盒子虽然没有高度，但是会撑开父盒子高度。浮动：盒子浮了起来，不会占据原来的位置，若父盒子没有定义高度，则不会撑开父盒子，父盒 子高度为0。(浮动可以让多个块级元素在一行显示，且块与块之间没有空隙，但要注意给父盒子清除浮动，否则父盒子不会被撑开)。为什么要清除浮动呢？清除浮动的本质是什么？　　清除浮动主要是为了解决父级元素因为子级浮动引起...
js中给某个class属性元素加样式。 css中加float后，元素找不到了，用margin:right可以看到...
weixin_34232617的博客
10-10 276
2019独角兽企业重金招聘Python工程师标准>>> ...
父div 宽度为auto 子div用float 失效的问题
tenggeer0789的博客
06-12 769
子DIV浮动（float）后父DIV高度自动失效解决方案 如下所示，子元素div2 本身具有高度和宽度，但由于其具有float:left属性后，其父元素div1不具有高度。 <html> <head> </head> <body> <div id="div1"> <d...
子DIV使用float后撑不开父DIV的问题
DB的技术日志
08-26 740
子div使用float后撑不开父div的问题   2011-04-16 12:21:19|  分类： CSS |  标签：div  height  撑开  ie6  auto  |举报|字号 订阅 子div使用float后不撑开父div的问题。 　　方法出处，但是之间的区别是我自己总结的:　 　　http://blog.csdn.net/qsdnet/arc
css float left right 中间空间城数据无法显示
weixin_30889885的博客
05-17 101
css float left right 中间空间城数据无法显示 是由于设定了width具体值太小造成，简单用%值或不设置。 转载于:https://www.cnblogs.com/allensun-193/p/5502958.html...
CSS清除浮动使父级元素展开的三个方法
09-25
我们需要预先知道子元素的总高度，然后将这个高度设置为父级元素的高度。例如，在本例中，子元素的高度是100像素，加上边框的2像素，总共是102像素。因此，我们将`.content`的高度设置为102像素，父级元素就能正确...
父级元素未设置高度和宽度时高度塌陷问题的解决方法
12-13
在网页布局设计中，一个常见的问题就是所谓的“高度塌陷”（Height Collapsing），这通常发生在父级元素没有设置高度和宽度，并且其内部包含了浮动元素（如`float:left`或`float:right`）的情况下。当子元素浮动后，...
DIV CSS用float时引起背景不正常显示的解决办法
攻城狮Luke
01-07 5474
当div里面套嵌多个用float定义的层是，背景图没有办法在firefox里面显示。 上网搜了一下才找到解决的方法。 　　div+css布局无法避免的冗余标签完全严格按照w3c的标准来布局是不可能的，想要在不同版本的浏览器下都表现出漂亮的网页，几乎无可避免地要使用一些多余的标签。 　　总结而言，div布局必须用到冗余标签的地方主要有三个： 　　一是背景图和背景色，当内层元素
子div设置float后导致父div无法自动撑开的问题
weixin_30776863的博客
01-02 113
子div设置float后会导致父div无法自动撑开 原因：内部的DIV因为float:left之后，就丢失了clear:both和display:block的样式，所以外部的DIV不会被撑开。 以下是几种解决办法（假设父div的class为“container”）: 方法1、使用伪类 1 .container:after{ 2 content: "."; 3...
float 父级元素包浮动的子元素的解决方案
jia_dojo的专栏
02-09 534
css 浮动模型中。如果某个元素设置了float属性，那么之后的元素都会收到影响。 浮动元素有一个问题，当都是块级元素时，浮动元素会产生浮动流导致其他的块级元素看不到浮动的元素。 如果出现这种情况，我们在设置了浮动元素自动排队后，想让父及元素由父级元素中的内容自动将父级元素撑开时发现此时不生效了。父级元素缩到一起了，那么此时我们该如何处理呢？ 可以通过 属性clear: both; 清除左右...
为什么"overflow:hidden"能清除浮动的影响
qyt1988528的博客
11-22 1047
我们都知道"overflow:hidden"可以溢出隐藏，即当内容元素的高度大于其包含块的高度时，设置该属性即可把内容区域超出来的部分隐藏，使内容区域完全包含在该包含块中。 然而"overflow:hidden"还有另外一个特殊的用途，那就是清除包含块内子元素的浮动。我们先来看一个实例： //html // css .parent{ width:300px;
position与float小知识
zyy_0725的博客
03-09 680
position小知识：1、应用了position: relative/absolute的元素，margin属性仍然有效。2、position: absolute忽略根元素的padding。3、行内元素在应用了position: absolute之后会改变display。4、应用了position: absolute/relative之后，会覆盖其他非定位元素（即position为static的元...
absolute绝对定位的元素显示不出来的可能原因
热门推荐
hzxOnlineOk的博客
08-07 1万+
在父元素position: relative相对定位后 对子元素position: absolute绝对定位，如果没有指定width，会显示空白，当然，如果同时设置left和right，相当于会默认计算一个width，所以也可以正常显示 <View style={{ position: 'absolute', width: '100%', left: 0, // r
float和absolute
kanaijidaan的专栏
10-07 446
设定float：left / right属性值的元素与设有position:absolute属性值的元素都会脱离其正常文档流，将自己原本占据的空间让出来。 但是他们之间还是存在区别的； 设定float属性的原本目标是为了让文本去环绕一个元素。因此虽然浮动元素让出了它原本的空间，文本流所在的盒子会占据这个空间，但是文本却会围绕浮动的元素，也因此不会被浮动的元素所遮盖。 代码： 效果：
float:left不完全脱离，position:absolute:完全脱离（文档流，文本流，浮动元素）
爱码喵的博客
09-04 2065
可理解为文档流在最下一层，文本流和浮动元素在上同一层，故元素浮动后，后面的元素内的文字不会覆盖到浮动元素上来，而是环绕 &amp;amp;amp;lt;style type=&amp;amp;quot;text/css&amp;amp;quot;&amp;amp;amp;gt; .wrap{ width:200px; border:1px solid red; } .
子绝父相，父元素清除浮动，导致子元素显示不全
weixin_34185560的博客
06-07 500
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box1{ width: 200px; height:...
解决CSS高度塌陷：浮动元素影响父级高度
这个问题通常发生在父元素的子元素设置了浮动（如`float:left`或`float:right`）时。正常情况下，父元素的高度会被其子元素的内容自动撑开。然而，当子元素浮动后，它会脱离文档流，不再对父元素的高度产生影响，这...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值