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

最新推荐文章于 2020-11-24 10:13:57 发布
最新推荐文章于 2020-11-24 10:13:57 发布
阅读量793 收藏
点赞数
分类专栏： DIV+CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Eric_Tsai/article/details/43307963
版权
今天在学习psd切图转换成html的时候，我为父元素<div>设置了float：left，为子元素设置了背景图片，宽和高，当我F12查看网页的时候，发现没有出现预料的结果，而是不显示子元素的背景图片。各样的清除浮动，都不行。随后仅仅为父元素设置了合适的宽度，子元素就显示了。特此记下，以备同样的初学者参考
Eric_Tsai
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS清除浮动使父级元素展开的三个方法
09-25
我们需要预先知道子元素的总高度，然后将这个高度设置为父级元素的高度。例如，在本例中，子元素的高度是100像素，加上边框的2像素，总共是102像素。因此，我们将`.content`的高度设置为102像素，父级元素就能正确...
父级元素未设置高度和宽度时高度塌陷问题的解决方法
12-13
在网页布局设计中，一个常见的问题就是所谓的“高度塌陷”（Height Collapsing），这通常发生在父级元素没有设置高度和宽度，并且其内部包含了浮动元素（如`float:left`或`float:right`）的情况下。当子元素浮动后，...
css清除浮动的几种方法_清除浮动的几种方法
weixin_39849287的博客
11-24 73
标准流：盒子会各占整行位置。子盒子若是标准流，父盒子虽然没有高度，但是会撑开父盒子高度。浮动：盒子浮了起来，不会占据原来的位置，若父盒子没有定义高度，则不会撑开父盒子，父盒 子高度为0。(浮动可以让多个块级元素在一行显示，且块与块之间没有空隙，但要注意给父盒子清除浮动，否则父盒子不会被撑开)。为什么要清除浮动呢？清除浮动的本质是什么？　　清除浮动主要是为了解决父级元素因为子级浮动引起...
js中给某个class属性元素加样式。 css中加float后，元素找不到了，用margin:right可以看到...
weixin_34232617的博客
10-10 259
2019独角兽企业重金招聘Python工程师标准>>> ...
父div 宽度为auto 子div用float 失效的问题
tenggeer0789的博客
06-12 748
子DIV浮动（float）后父DIV高度自动失效解决方案 如下所示，子元素div2 本身具有高度和宽度，但由于其具有float:left属性后，其父元素div1不具有高度。 <html> <head> </head> <body> <div id="div1"> <d...
子DIV使用float后撑不开父DIV的问题
DB的技术日志
08-26 716
子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 88
css float left right 中间空间城数据无法显示 是由于设定了width具体值太小造成，简单用%值或不设置。 转载于:https://www.cnblogs.com/allensun-193/p/5502958.html...
CSS清除浮动float的三种方法小结
09-24
这会使浏览器为父级元素创建一个新的块格式化上下文，从而包含所有的浮动子元素。但请注意，这可能会导致滚动条的出现，即使实际内容并未超出父元素的边界。为了解决IE6/7的兼容性问题，通常还会添加`zoom: 1;`，以...
css等比例分割父级容器（完美三等分）的实现
11-19
这是最传统的方法，通过设置子元素的`float:left`和宽度百分比来实现等分。例如，对于三个子元素，我们可以设置每个子元素的宽度为`33.33%`。然而，这种方法存在一个问题，由于浏览器的解析差异和边距、边框的影响...
DIV CSS用float时引起背景不正常显示的解决办法
攻城狮Luke
01-07 5435
当div里面套嵌多个用float定义的层是，背景图没有办法在firefox里面显示。 上网搜了一下才找到解决的方法。 　　div+css布局无法避免的冗余标签完全严格按照w3c的标准来布局是不可能的，想要在不同版本的浏览器下都表现出漂亮的网页，几乎无可避免地要使用一些多余的标签。 　　总结而言，div布局必须用到冗余标签的地方主要有三个： 　　一是背景图和背景色，当内层元素
子div设置float后导致父div无法自动撑开的问题
weixin_30776863的博客
01-02 102
子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 496
css 浮动模型中。如果某个元素设置了float属性，那么之后的元素都会收到影响。 浮动元素有一个问题，当都是块级元素时，浮动元素会产生浮动流导致其他的块级元素看不到浮动的元素。 如果出现这种情况，我们在设置了浮动元素自动排队后，想让父及元素由父级元素中的内容自动将父级元素撑开时发现此时不生效了。父级元素缩到一起了，那么此时我们该如何处理呢？ 可以通过 属性clear: both; 清除左右...
为什么"overflow:hidden"能清除浮动的影响
qyt1988528的博客
11-22 1027
我们都知道"overflow:hidden"可以溢出隐藏，即当内容元素的高度大于其包含块的高度时，设置该属性即可把内容区域超出来的部分隐藏，使内容区域完全包含在该包含块中。 然而"overflow:hidden"还有另外一个特殊的用途，那就是清除包含块内子元素的浮动。我们先来看一个实例： //html // css .parent{ width:300px;
position与float小知识
zyy_0725的博客
03-09 642
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 431
设定float：left / right属性值的元素与设有position:absolute属性值的元素都会脱离其正常文档流，将自己原本占据的空间让出来。 但是他们之间还是存在区别的； 设定float属性的原本目标是为了让文本去环绕一个元素。因此虽然浮动元素让出了它原本的空间，文本流所在的盒子会占据这个空间，但是文本却会围绕浮动的元素，也因此不会被浮动的元素所遮盖。 代码： 效果：
float:left不完全脱离，position:absolute:完全脱离（文档流，文本流，浮动元素）
爱码喵的博客
09-04 2039
可理解为文档流在最下一层，文本流和浮动元素在上同一层，故元素浮动后，后面的元素内的文字不会覆盖到浮动元素上来，而是环绕 &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 456
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box1{ width: 200px; height:...
帮我写一个网页，在body中间放一个class为abc的div，宽度为1000px，这个div内再放五个class为efg的div，这五个div要在同一行，不能用flex，要用float布局，这五个div每个的宽度只有20px，，这五个div中最后那个必须要用last-child来设置跟父级元素边界的距离，并且距离为5px，我现在重点是要保证last-child设置的值必须有效，其他都无所谓。
最新发布
05-30
- `overflow: hidden`：为了让浮动的子元素不超出父级元素。 - `float: left`：让子元素横向浮动。 - `margin-right: 0`：为了让每个子元素之间没有空隙。 - `.efg:last-child`：选择最后一个子元素，并设置其距离...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值