html div占父容器比,子div撑不开父div的几种解决办法

子div撑不开父div的几种解决方法

子div撑不开父div的情况：

.example{

background: #008000;

width: 400px;

margin: 10px;

padding: 10px;

}

.example .childrenDiv{

float: left;

height: 100px;

width: 100px;

word-break: break-all;

word-wrap: break-word;

}

tatatattttaatatatatatatata

tatatattttaatatatatatatata

显示结果：

解决方法：

(一)：加

代码实例：

tatatattttaatatatatatatata

tatatattttaatatatatatatata

显示结果：

分析：

父div作为外部容器，子div设置了float样式，则外部容器div因为内部没有clear导致不能被撑开，即内部div因为float：left之后，就丢失了clear：both和display：block的样式。

(二)：通过伪元素将父容器撑开

代码实例：

.clearfix:after{

content:".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

/* Hides from IE-mac \*/

*html.clearfix{height: 1%;}

/*end hide from IE-mac*/

tatatattttaatatatatatatata

tatatattttaatatatatatatata

显示结果：

分析：

1.不建议采用第一种方法，首先，代码中多了一个没有意义的div；其次，在用dojo做Drag&Drop的时候，由于这个div是父容器div的一个子节点，如果这个节点被移动，则会造成排版上的错误，而且如果要将子div移动到这个div之后，则会因为clear：both被强制换行显示。

2.方法二原理：after伪对象将在应用clearfix的元素的结尾添加content中的内容，在这里添加了一个“.”，并且把它的display设置成了block，高度设为0，clear设为both，visibility设为隐藏，即撑开容器。

3.因为windows IE不支持上述做法，所以要在IE上也完美显示，则必须在clearfix的css定义的后面加一些专门为IE设定的hack，即：

/* Hides from IE-mac \*/

*html.clearfix{height: 1%;}

/*end hide from IE-mac*/

因为转移符“\”，Mac IE浏览器会忽略掉这段hack，但window IE不会，它会应用*html.clearfix{height:1%;}来达到撑开div容器的目的(貌似Mac IE没有办法解决这个问题，不顾用户数量太少，Safari支持就可以了O(∩_∩)O哈哈~)。

(三)父容器增加一个属性：overflow：hidden

代码实例：

tatatattttaatatatatatatata

tatatattttaatatatatatatata

显示结果：

(四)父容器增加一个属性：display：table

代码实例：

tatatattttaatatatatatatata

tatatattttaatatatatatatata

显示结果：