为什么我的实际效果达不到想要的效果啊！主要是li标签的浮动效果影响的，在样式里用了clear属性还是解决不了。_html/css_WEB-ITnose

登录后复制

想达到的效果：
而实际的效果 ：

回复讨论(解决方案)

Big Ben

Choose an image.

可不可以讲一下原理啊？为什么我在ul或者li标签的样式里加"clear：right";就不行啊

首先去掉ul的float：left
然后li元素是浮动元素，而浮动元素是不在文档流中，所以这个ul是没有高度

加上：

ul自适应高度ul{     zoom:/*IE*/}ul:after{     content:' ';     display:block;     clear:both;     height:0;}

登录后复制

就好了

1. 首先说浮动
浮动元素默认情况下是没有宽度的，得靠内容撑出来宽度或手动给它加个宽度，
你把

浮动了 而又没有给它加宽度，所以它就是所有
• 的宽度。
  一般情况下，对于用
  • 来作导航栏，仅浮动
  • ，然后给
    加个overflow:hidden 即可
    2. 再说说clear
    clear:both 的含义就是清除浮动元素对当前元素的影响，
    也就是说clear:both 应该加在“当前元素”（一般是非浮动元素）
    3. 最后说说布局
    一般，布局都是从整体到局部的。
    也就是说，你得先布大的框架，再整各个不同的小模块。比如：
    

    登录后复制
    
    

    感谢大神们的赐教，看来一个小小的浮动属性所要注意的细节都那么深啊！！！不过我好奇的是我所看到的源码是没有对浮动进行处理竟然可以达到效果，这本书大概是在07年出的，当时的浏览器处理会不一样吗???