欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-06-15 19:05:33
...
                  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