clear为什么能实现自动高度_html/css_WEB-ITnose

回复讨论(解决方案)

不是clear能实现自动高度，而是content里面的div设置浮动后，在比较标准的浏览器中，比如FF，content不能自动增加高度，你可以清除浮动或者把content也设置浮动

好像只能意会不能讨言传~~~~o(∩_∩)o~哈哈

按理说，content的div的高度是根据其子元素的高度确定的，而content的3个子元素，两个的高度都是确定的，只有你注释掉的那个是自适应高度的~~所以content的不会再变了吧~~

按理说，content的div的高度是根据其子元素的高度确定的，而content的3个子元素，两个的高度都是确定的，只有你注释掉的那个是自适应高度的~~所以content的不会再变了吧~~
什么意思，没明白唉

class=content的那个div，下面有三个子div，其中两个#left，#right，这两个的高度在style部分都固定了，只有第三个class = clear的div是自适应高度的，
你把#left的height属性删除，再试试，看是不是content的高度会变成自动增长的

相当于给content一个overflow:hidden;

呵呵，楼主你这个问题我也遇到过，这是因为当有一个DIV作为外部容器的时候，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开，像这样的解决方式有三种：
1、第一种就像楼主所说的(不介意使用这种方法，因为人为的加一个无用的div，会导致遍历的时候出现多余的这个div)
2、子容器有float,则父容器相应的也用float属性，如下：

 .content{ margin: 0 auto; width: 1000px; float: left; border: 1px solid red; } #left{ width: 100px; height: 400px; border:1px solid blue; float: left; } #right{ width: 800px; height: 400px; border:1px solid green; float: left; }

 .content{ margin: 0 auto; width: 1000px; float: left; border: 1px solid red; } .content:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #left{ width: 100px; height: 400px; border:1px solid blue; float: left; } #right{ width: 800px; height: 400px; border:1px solid green; float: left; }

呵呵，楼主你这个问题我也遇到过，这是因为当有一个DIV作为外部容器的时候，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开，像这样的解决方式有三种：
1、第一种就像楼主所说的(不介意使用这种方法，因为人为的加一个无用的div，会导致遍历的时候出现多余的这个div)
2、子容器有float,则父容器相应的也用float属性，如下：
CSS cod……
这个貌似就是网上流传最多的clearfix