子元素浮动,父级元素为0怎么解决

当子元素浮动时无法撑开父元素,父元素高度为0。这时可以通过在浮动的子元素后清除浮动来使父元素获得正确的高度。



1.  额外标签法

这种方法就是向父容器的末尾再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器。这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签。

2. 使用after伪类

这种方法就是对父容器使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”,因为它比较小不太引人注意。然后我们再利用它来清除浮动(闭合浮动元素),并隐藏这个内容。

这种方法兼容性一般,但经过各种 hack 也可以应付不同浏览器了,同时又可以保证html比较干净,所以用得还是比较多的。

以下为一个采用伪类的CSS示范写法:

#box:after{
     content:".";
     height:0;
     visibility:hidden;
     display:block;
     clear:both;
}

3. 设置overflow为hidden或者auto

这种做法就是将父容器的overflow设为hidden或auot就可以在标准兼容浏览器中闭合浮动元素.

不过使用overflow的时候,可能会对页面表现带来影响,而且这种影响是不确定的,你最好是能在多个浏览器上测试你的页面。如无特殊情况,一般推荐使用hidden属性。

4. 浮动外部元素,float-in-float

这种做法就是让父容器也浮动,这利用到了浮动元素的一个特性——浮动元素会闭合浮动元素。这种方式在 IE/Win 和标准兼容浏览器中都有较好的效果,但缺点也很明显——父容器未必想浮动就浮动的了,毕竟浮动是一种比较特殊的行为,有时布局不允许其浮动也很正常。

时间: 2025-01-05 22:23:00

子元素浮动,父级元素为0怎么解决的相关文章

关于多子级元素充满父级元素高度的布局方式

关于多子级元素充满父级元素高度的布局方式,听着有些绕口,上个图应该就能很清楚的理解这标题的意思了: 如图:左右分栏的情况下,有顶部和底部导航,且在屏幕高度不定的时候(移动端,多设备适配),如何不适用js来让内容区自适应扩展,填满父级剩下的高度呢? 首先分两种情况: 一.顶部和底部导航为固定高度时,这种情况挺常见的,也是相对比较简单的一种情况: 方法1:使用box-sizing: border-box; 配合 height: 100%; 和上下padding来达到全屏侧边的效果: <!DOCTYP

html css样式子元素相对父级元素定位

废话不多说. 父级元素 样式设置: position:relative; 子元素样式: position: absolute; 这样就可以达到子元素相对父级元素定位了. 原文地址:https://www.cnblogs.com/bubbletg/p/10225288.html

jQuery使用(四):DOM操作之查找兄弟元素和父级元素

查找兄弟元素 向下查找兄弟元素 next() nextAll() nextUntil() 向上查找兄弟元素 prev() prevAll() prevUntil() 查找所有兄弟元素 siblings()  1.1.1.next()方法用来查找下一个兄弟元素,可以传参也可以不传参.参数可以是任意jQuery选择器,表示如果下一个元素如果是指定的元素就选定.当没有选中指定的元素时,jQuery链式调用还是保持原来的jQuery对象. <!-- next --> <button>点我&

input元素相对父级元素错位了?IE7

原因: 产生这种错误的原因是因为当input仅仅包含父元素,父元素拥有layout,和margin-left属性时,IE6和7的input就会错误的继承margin-left这样的属性. 解决办法: 给input元素外面套一个span,label这样的内联元素,这样就会消除bug. 原理很简单,input父元素是内敛元素,就不会继承margin-left了.

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

jQuery的出现给广大开发者提供了不少的方便.从要自己一个一个敲代码,到直接调用方法,无疑大大地提高了网站开发的效率.而在jQuery中有一些方法非常的实用.下面就给大家介绍下jquery选择器:获取父级元素.同级元素.子元素的方法. 一.获取父级元素1.parent()获取指定元素的父级元素,注意:是最靠近指定元素的父级元素. 2.parents()获取指定元素的所有父级元素,注意:是所有的父级元素,包括body,html 二.获取同级元素1.next()获取指定元素的下一个同级元素(注意:

解决父级元素高度塌陷问题的方法

如果父元素只包含浮动元素,且父元素未设置高度和宽度的时候.那么它的高度就会塌缩为零,也就是所谓的“高度塌陷”,如果父级元素包含背景或者边框,那么溢出的元素就不像父级元素的一部分了.解决“高度塌陷”的问题很简单: 1.浮动父级元素 如果让父级元素浮动,父级元素的高度就会扩大,直到完全包含它里面的浮动元素,虽然这个方法很奇怪,但是很有效.如果选择这种方法,一定要在该元素的下个元素添加clear:both,确保浮动元素落到父级元素的下方. 2.利用overflow:hidden,zoom:1 { ov

子块元素在父块元素中居中

水平居中有两种情况: 子元素,父级元素都是块级元素的时候,子级元素{margin:0 auto}.需要注意的是当子级元素的position为非默认及relative时,这种设置会失效. 如p等标签中内的文字内容水平居中:使用{text-Align:center}.垂直居中设置该元素的行高等于元素的高.如:{height:100px;line-height:100px}可实现.注意:这种方法应用于行内元素

float浮动后,父级元素高度塌陷和遮盖问题

当子元素不浮动的时候,父元素的高度是由子元素撑起来的. 子元素A和B是两个div,独占一行 效果如图: 当子元素B浮动起来之后,父元素高度塌陷到只剩子元素A的高度 效果如图: 当给子元素A(div)设置CSS属性:display:inline 后,A的宽高将不起作用,宽高由内容撑开,即被字母A撑开.此时父级元素高度没有塌陷到和A一样,而是和B的高度一样 效果如图: 当子元素A和B同时浮动起来之后,A的CSS属性:display:inline失效,效果为float的效果,同时父级元素的高度彻底塌陷

Jquery 父级元素、同级元素、子元素

prev():获取指定元素的上一个同级元素(是上一个哦). prevAll():获取指定元素的前边所有的同级元素. find():查找子元素方式 next(): 获取指定元素的下一个同级元素(注意是下一个同级元素哦) closest(): 查找父级元素(第一个如:<p class='a'> <a class='a'><b class='c'></b></a> </p>) $(".c")closest(".

jquery获取父级元素和子级元素

    <script type="text/javascript">  function show(x){     var y=$(x);//转换成jquery对象     //查找父元素    alert( y.parent().attr("name"));     alert( y.parent().attr("id"));     //查找祖先,是个集合 不包括自身     alert(y.parents("tr&q