【css基础】div父元素根据子元素高度自适应高度

两种情况(无特殊说明子元素都是指代父元素的第一级子元素)

第一种:若子元素没有带有float元素的元素,对于高度是自适应的没有问题.
第二种:若子元素全是带有float属性的元素,这时候我们会发现父元素塌陷,高度为０,因为float浮动元素脱离了正常的文档流,父元素相当于没有了这两个儿子！

解决这个问题的根源就是清除浮动：

1 , 给父节点增加样式overflow:hidden或者overflow:auto
2 , 在子元素中的最后一个添加一个兄弟节点,当然该节点应该是一个空节点.你可以用div或者br

<div style="clear:both"></div>
<!--或者-->
<br clear="all" />

参考资料:
那些年我们一起清除过的浮动
 对overflow与zoom”清除浮动”的一些认识

时间： 2024-08-09 19:51:37

【css基础】div父元素根据子元素高度自适应高度的相关文章

【CSS】div父容器根据子容器大小自适应

Div即父容器不根据内容自动调节高度,我们看下面的代码: 1 <div id="main"> 2 3 <div id="content"></div> 4 5 </div> 当Content内容多时,即使main设置了高度100%或auto.在不同浏览器下还是不能完好的自动伸展.内容的高度比较高了,但容器main的高度还是不能撑开. 我们可以通过三种方法来解决这个问题. 一,增加一个清除浮动,让父容器知道高度.请注意,

css设置时父元素随子元素margin值移动

父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. HTML,CSS: <div class="box1"> <div class="box2"> <div class="content"> <div class="margin">123</div> &l

关于css中父元素与子元素之间margin-top的问题

之前在使用经常遇到下面的问题: html: 1 <div class="top"> 2 <div class="one">I'm the first!</div> 3 <div class="two">I'm the second!</div> 4 </div> css: .one{ width: 100px; height: 100px; background: red;

父元素与子元素之间的margin-top问题(css hack)

hack: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&qu

css选择其指定标签父元素的子元素（first-child 与 first-of-type之间的区别）

一.选择元素父级的子元素(包含其它不相同的元素) (1)li:first-child { }; 选择第一个子元素(注意这里没有括号) (2)li:last-child { }; 选择ul中最后一个子元素 (3)li:nth-child(3) { }; 顺数第三个元素 (4) li:nth-last-child(3) { }; 倒数第三个二.选择父级元素的相同子元素(不包含不相同的子元素) (1)li:first-of-type { } 选择第一个li (2)li:last-of-type{ }

父元素与子元素之间的margin-top问题(css hack)（转载）

情况: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. 解决方法: 1.修改父元素的高度,增加padding-top样式模拟(padding-top:1px:常用) 2.为父元素添加overflow:hidden:样式即可(完美) 3.为父元素或者子元素声明浮动(float:left:可用) 4.为父元素添加border(border:1px solid transparent可

css父元素和子元素之间margin-top的问题

问题:父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素的盒子也会受到子元素的margin-top值的影响. 原因:所有毗邻的两个或者多个元素的margin将会合并为一个margin共享之.毗邻的定义为:同级或者嵌套的盒元素,并且它们之间没有非空内容.padding或者border分隔.其中float和position(css2.1浮动元素和绝对定位元素不参与margin折叠) 解决方法: 1.修改父元素的高度,增加padding-top样式模拟(paddin

jquery选择器如何获取父级元素、同级元素、子元素

一.新建页面 1 <ul> 2 <li>list item 1</li> 3 <li>list item 2</li> 4 <li class="third-item">list item 3</li> 5 <li>list item 4</li> 6 <li>list item 5</li> 7 </ul> 8 9 <p>Hell

jquery选择器之获取父级元素、同级元素、子元素（转）

一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div"><a id="href_fir" href="#">href_fir</a><a id="href_sec" href="#">href_sec</a><a id="href_thr" href=&quo

jquery查找父元素、子元素(个人经验总结)

使用js或者jquery查找父元素.子元素经常遇到.可是用起来总容易混淆,这里统一总结了一下,以后用起来相信会方便好多这里jquery向上查找父元素用到的方法:closest() parents() parent() 向下查找子元素用到的方法:find() children() js用的是 children[] 属性 html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "htt