css中div不能被撑开高度不能自适应的问题

原创 2012年03月30日 14:50:34

有时我们发现有些div总是不能根据内容自适应,父级元素高度只有一点点,但子元素很高,看起来就像裤子短了很长一截,检查半天也没有结果。面对着这种丑陋的情况,我们真的不知道该如何处理。

冷静下来,为什么会出现这种情况,难道是因为使用了浮动的原因吗?

确实是

浮动能产生很好的效果,但是很多人忽略了浮动的细微性质,那就是浮动使一个块级元素与该层的其他元素游离开来,他漂浮在父元素的上面,父元素无法在视觉上包含他。虽然我们第一次接触float的时候,文档资料里面有提到,但是因为太细微了,往往被忽略了。

但是我们没法不使用浮动,为了解决这个矛盾,我们需要在使用浮动的时候同时在浮动的元素最后加上一个清除浮动的块级元素<div style="clear:both;"></div>

初级css技术人员可能会写css,但是细节上的东西,才能决定你能不能写出高质量的css

DIV百分百自适应宽度碰上padding/margin 被撑开

平时在制作页面的时候,总会碰到有的元素是100%的宽度。众所周知,如果元素宽度为100%时,其自身不带其他盒模型属性设置还好,要是有别的,那将导致盒子撑破。比如说,有一个边框,或者说有margin和p...
  • iwei13
  • iwei13
  • 2015年12月22日 20:47
  • 2886

[译] 关于CSS中的float和position (父容器div内的子元素div为float时,父元素无法撑开(或高度自适应)的解决方式)

当构建页面排版时,有不同的方法可以使用。使用哪一种方法取决于具体页面的排版要求,在不同的情况下,某些方法可能好过于其他的方法。比如,可以使用若干个浮动元素来构建一个整洁简洁的页面排版。或者,如果需要更...
  • GoodShot
  • GoodShot
  • 2015年03月17日 21:04
  • 20950

div里ul li浮动之后父容器高度不能自动增加的解决方法

之前在Github上fork了一个题目,按照流程图来制作一个电商网站…但是遇到点问题 如果一个Div内的Ul,li元素浮动的话,这个DIV的高度是没办法被正常的撑起来(显示高度为0) 下图一共4个...
  • GrahamACER
  • GrahamACER
  • 2016年09月14日 22:08
  • 1752

[译] 关于CSS中的float和position (父容器div内的子元素div为float时,父元素无法撑开(或高度自适应)的解决方式)

当构建页面排版时,有不同的方法可以使用。使用哪一种方法取决于具体页面的排版要求,在不同的情况下,某些方法可能好过于其他的方法。 比如,可以使用若干个浮动元素来构建一个整洁简洁的页面排版。或者,如...
  • sunny_desmond
  • sunny_desmond
  • 2016年05月06日 09:59
  • 1100

[译] 关于CSS中的float和position (父容器div内的子元素div为float时,父元素无法撑开(或高度自适应)的解决方式)

当构建页面排版时,有不同的方法可以使用。使用哪一种方法取决于具体页面的排版要求,在不同的情况下,某些方法可能好过于其他的方法。比如,可以使用若干个浮动元素来构建一个整洁简洁的页面排版。或者,如果需要更...
  • GoodShot
  • GoodShot
  • 2015年03月17日 21:04
  • 20950

父容器div内的子元素div为float时,父元素无法撑开(或高度自适应)的解决方式以及css中position和float的介绍

先简单给出父元素无法高度自适应时的解决方案: 第一种:在父容器上设置 overflow:auto 或者hidden可以让它自动包含子元素,从而具有了实际的height值。      第二种:在子元素的...
  • qq_28080659
  • qq_28080659
  • 2016年11月03日 20:03
  • 1053

关于CSS中的float和position (父容器div内的子元素div为float时,父元素无法撑开(或高度自适应)的解决方式)

当构建页面排版时,有不同的方法可以使用。使用哪一种方法取决于具体页面的排版要求,在不同的情况下,某些方法可能好过于其他的方法。 比如,可以使用若干个浮动元素来构建一个整洁简洁的页面排版。或者,如...
  • a495420712
  • a495420712
  • 2016年03月24日 20:06
  • 558

清除因为浮动,DIV的高度不能自动撑开的问题

如何让包围元素在视觉上包围浮动元素呢?需要在这个元素中的某个地方应用 clear: 让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边,并且希望这幅图片和文本包含在另一个具有背景...
  • wenqingzzz
  • wenqingzzz
  • 2014年08月14日 16:12
  • 237

解决子级用css float浮动,而父级div不能自适应高度问题

原文地址 DIVCSS5 解决子级对象使用 css float 浮动,而父级 div 不能自适应高度,如下图: 造成这种情况的原因是:对象内的盒子使用float后,导致对象本身不能被撑开自适应...
  • u013172063
  • u013172063
  • 2015年10月26日 17:43
  • 350

css中解决浮动DIV撑开父层高度的问题

1) 加高法: 浮动的元素,只能被有高度的盒子关住。 也就是说,如果盒子内部有浮动,这个盒子有高,那么妥妥的,浮动不会互相影响。但是,工作上,我们绝对不会给所有的盒子加高度,这是因为麻烦,并且不能适...
  • qq_16711967
  • qq_16711967
  • 2016年12月14日 10:31
  • 264
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css中div不能被撑开高度不能自适应的问题
举报原因:
原因补充:

(最多只允许输入30个字)