本文目录
- css高度塌陷
- css高度塌陷怎么理解
- 解决高度塌陷的问题和父子元素外边距重叠问题
- css将列表以行内块显示时怎么把他们之间的间隙去掉在
- 标签上设置margin:0也没有用
- float为何会让外部容器高度塌陷这是bug
css高度塌陷
在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。避免父元素高度塌陷的方法: 1.加一个空div标签清除浮动(缺点：不利于优化，优点：兼容性强)《div style="clear:both"》《/div》2. overflow+zoom（优点：兼容性强。 缺点：对margin属性有影响，不能设负值，设负值无效。负值绝对定位也不可以。）example { overflow:hidden; zoom:1;}3.after+zoom （最好用的，最推荐的，兼容性也很好）example{ zoom:1}example:after{ display:block; content:’’, clear:both; height:0; overflow:hidden}4.让父元素本身也浮动（不推荐，如果也设置浮动，父元素宽度就会随着子元素变化)
css高度塌陷怎么理解
高度塌陷，容器用相对定位，没有设置高度，容器内部元素和内容无法把容器撑开，高度塌陷。解决方法是设置容器height:auto;相对定位的容器可以被撑开，使得高度不塌陷。
解决高度塌陷的问题和父子元素外边距重叠问题
在文档流中，父元素的高度是被子元素给撑开的，如图，一个父元素box1里有个子元素box2，当box2没有设置宽高时，html中box1高度是没有的。 首先上答案： 第一种解决方案： 给父元素设置一个属性：overflow:hidden/overflow:auto. 第二种解决方案： 给父元素用css样式添加一个伪类，设置一个空内容然后清除浮动。 例：box1有个子元素box2，当box2没有高度时，box1高度就只有2个border的高度，没有被子元素撑开。当子元素box2有高度时，box1的高度会被撑开。但是当给box2设置一个float脱离文档流之后，子元素便无法撑开父元素的高度，造成塌陷。我们可以给父元素一个高度将高度撑开，但是这样父元素高度就无法自适应子元素高度了。 如何解决高度塌陷的问题： 根据W3C的标准，页面中每一个元素都有BFC的属性，属性默认情况下是关闭的，如果开启BFC，元素将具有如下属性： 1.父元素的垂直外边距不会和子元素重叠 2.开启BFC的元素不会被浮动元素所覆盖 3.开启BFC的元素可以包含浮动的子元素。如何开启BFC： 1.设置元素浮动 2.设置元素绝对定位 3.设置元素inline-block 4.将元素设置一个overflow非visible的值 给父元素也设置浮动后的效果： 父元素的高度被撑开，不过宽度也消失了，变得和子元素一样宽，并且box1的兄弟元素box3也会随之顶上来给父元素设置position:absolute后，得到的效果和设置float效果是一样的：父元素高度被撑开，宽度消失，下面的兄弟元素box3顶上来。给父元素设置display:inline-block后，效果如图： 父元素高度被撑开，宽度消失，兄弟元素box3未顶上来。最佳解决方案： 给父元素设置一个overflow非visible的值，如设置overflow:auto/overflow:hidden均可。 父元素高度被撑开，宽度也正常，兄弟元素也没有顶上来。 具体示例如下： 还有一个解决方案，是我们可以给box2添加一个兄弟元素，让这个兄弟元素将父元素撑开 一开始box1有个子元素box2，还有个兄弟元素box3，box2因为有浮动，所以出现了塌陷问题，如图现在给box2添加一个兄弟元素box4，即给box1添加一个无内容的子元素，给这个子元素设置清除浮动，父元素高度也会被撑开。 但是这种方式有一个缺陷，会增加html中的结构，给内容增加了一个box4，我们可以改进这种方法，用css的：after伪类方法给父元素box1增加一个子元素伪类，给这个伪类设置清除浮动。 如图：设置一个box1:after伪类，也可清除浮动，撑开父元素高度第二个问题：解决父子元素外边距重叠的问题： 有box1和box2这对父子元素，当我想让子元素box2距离父元素box1有个100px的高度时，发现box1和box2一起都向下移动了100px，并没有实现让box2向下移动100px，距离box1顶部100px的目的。 如何解决这个问题： 当我们给box1添加一个子元素table放在box2的前面时，就可以达到让box2距离box1 100px的目的。但是这样会改变文档的结构，我们同样可以以css伪类的方式解决这个问题， 只不过设置伪类时，要设置成display：table，设置成display：block是没有用的。如图即可：
css将列表以行内块显示时怎么把他们之间的间隙去掉在标签上设置margin:0也没有用
原因是display:inline-block;属性产生的间隙。display:inline-block是让元素在一行显示，但是这些元素在html里面是上下行排列的，所以中间有换行符，于是并排显示就有了换行符带来的空隙。方案一：给元素设置float:left,缺点高度塌陷，要清除浮动。（推荐）li{display:inline-block;padding:5px;background-color:#ff6;float:left;}.clr:after{clear:both;display:block;overflow:hidden;height:0;content:".";}.clr{zoom:1;}《ul class="clr"》《li》《a href=""》HTML《/a》《/li》《li》《a href=""》CSS《/a》《/li》《li》《a href=""》Javascript《/a》《/li》《li》《a href=""》XML《/a》《/li》《/ul》方案二：设置子元素的margin-left为负值，但是元素之间的间隙大小是根据上下文的字体大小确定的，而每个浏览器的换行空隙大小不同，如果font-szie：16px,chrome空隙为8px,火狐空隙为4px.所以这个方法不通用。方案三：设置父元素 display:table;word-spacing:-1em;目前这个方法可以完美解决，且兼容其他浏览器。
float为何会让外部容器高度塌陷这是bug
父元素只包含浮动元素，那么它的高度就会塌缩为零（前提就是你们没有设置高度（height）属性，或者设置了为auto。就会出现这种情况，当然不是所用的浏览器都是这样的，在IE8下面没有这种情况。）如果父元素不包含任何的可见背景，这个问题会很难被注意到，但是这是一个很重要的问题。解决办法：1、在父元素的最后一个元素后面加一个《div style="clear:both"》《/div》，加的这个不影响整个布局。2、在父元素的属性中加上overflow:hidden。
