html布局-子div浮动后,父容器撑不开解决

文章:子div撑不开父div的几种解决办法:

1,可以在所有子元素后增加<div style="clear:both;"></div>

2,给父容器增加样式:

.clearfix:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

兼容IE样式:

/* Hides from IE-mac \*/

* html .clearfix {height: 1%;}

/* End hide from IE-mac */

3,父容器增加样式:overflow:hidden

感觉第三种方法最为简单。

原文地址:https://www.cnblogs.com/Tpf386/p/11790849.html

时间: 2024-11-11 03:08:14

html布局-子div浮动后,父容器撑不开解决的相关文章

子元素浮动后,父元素高度自动增加

father:after{ content:"."; height:0; visibility:hidden; display:block; clear:both; } 清除"闭合(清除)浮动"的方法,主要是一下四种: 1.    额外标签法 这种方法就是向父容器的末尾再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器.这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签.我个人不喜欢这种方法,但是它确实是W3C推荐的方法

【前端】浮动后父容器高度自适应

float:left; overflow:hidden; 当一个容器内元素都浮动后,它将高度将不会随着内部元素高度的添加而添加,所以造成内容元素的显示超出了容器. 在我们没有为容器设置高度的时候,容器的高度是自适应的.然而,当容器中的元素都浮动以后,脱离了文档流.容器的高度因为自适应的原因就为0了. 为了方便大家观察,我为父容器设置了边框.内间距.原本上面四张图片是在上面的容器中的.将图片设置左浮动以后,容器的高度就为0了. Q1:这会为我们带来什么影响? A1:浏览器在解析下一个容器的时候,默

浮动后父容器高度自适应

当一个容器内元素都浮动后,它将高度将不会随着内部元素高度的增加而增加,所以造成内容元素的显示超出了容器.为了便于查看效果,把刚才实例中的#layout增加一个边框和内边距: #layout { width:400px; border:2px solid #ccc; padding:2px;} 文章出处:标准之路(http://www.aa25.cn) 看到没,它没有被内容元素给撑高,要解决这个问题,需要使用以下样式 overflow:auto; zoom:1; overflow:auto;是让高

css 子元素浮动后父元素没有高度导致页面变形的解决办法

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">.par{width: 100%;height: auto;border: 1px solid red;}.left{width: 40%;float: left;height: 50px;background:

[装载]float元素浮动后高度不一致导致错位的解决办方法

原文出处:float元素浮动后高度不一致导致错位的解决办方法 给换行后的第一个li添加clear:left 如: ul li{float:left;width:160px;} .c{clear:left;} <li>1</li> <li>2</li> <li>3</li> <li class="c">4</li> <li>5</li> <li>6</

子DIV浮动(float)后父DIV高度自动失效解决方案

高度的自适应(父div高度随子div的高度改变而改变): 1.如果父div不定义height.子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改变. 2.如果父div定义height,子div均为标准流的时候,在IE下父div的height随内容变化而变化,如父div设置height:50px 如下所示,子元素div 本身具有高度和宽度,但由于其具有float:left属性后,其父元素div不具有高度. <html> <head&

子元素浮动后、父元素的高度自适应

一.普通情况下,即没有任何浮动样式等的情况下 设置父元素的高度为aotu 或100% 或者不设置,那么父元素会根据子元素的高度而自动调整自身高度. 栗子 <!--html代码--> <div id="wrap"> <img src="./1.png" alt="logo"/> <div id="content"></div> </div> CSS样式 #w

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

当子元素浮动时无法撑开父元素,父元素高度为0.这时可以通过在浮动的子元素后清除浮动来使父元素获得正确的高度. 1.  额外标签法 这种方法就是向父容器的末尾再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器.这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签. 2. 使用after伪类 这种方法就是对父容器使用after伪类和内容声明在指定的现在内容末尾添加新的内容.经常的做法就是添加一个"点",因为它比较小不太引人注意.然后我们再利用它来清

子元素浮动,父元素高度为0现象解释和原理浅见

有的人在写页子的时候常常会碰见这样的一个问题,就是有一个父级的div下面有子元素,子元素浮动起来后,父元素的高度变成0,撑不起来父级了. 现在先不说解决办法,先说下float属性,float定义:float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.(摘自:w3c). 从定义看出,其实float属性一开始是被应用与图片,来形成文字环绕效果的,任何的元素只要定义了float属