视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
clear为什么能实现自动高度_html/css_WEB-ITnose
2020-11-27 16:32:41 责编:小采
文档

    div自动高度    

上面的clear被注释后外面content 的高度不会自动增长,但是有了clear之后外面的content的高度自动增长了,这是为什么呢,clear不是只能清楚左右的浮动元素吗?


回复讨论(解决方案)

不是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; }

3、网站上找的最好的一种方法,就是运用伪类:
 .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

下载本文
显示全文
专题