现在,大部分的横排导航都是通过 ul -> li *n -> a 来实现的。具我所知,要达到这种效果,有几种方法可以实现。

  1.传统处理方式:

li {float:left;}/*这样,对固定宽度导航条来说,li不能自动居中*/

2.inline-block方式

ul {text-align:center;font-family:simsun;font-size:14px;}
li {display:inline-block;*display:inline;zoom:1;margin-right:-0.5em; *margin-right:0;}
a{display:block;}
/*
行内显示并且水平居中;display:inline;
zoom:1;是对ie的hack,
margin-right:0.5em是对现代浏览器去缝,
*/

而这两种实现方法中,float:left要比display:inline;的表现方式要好。因为内联(display:inline;)属于行布局,其特性是在一行里进行布局,所以不能被设定宽高。块级元素的布局相对于内联样式要精确的多。所以尽量使用float:left;

当我们使用float:left后,发现父级元素的div没有被撑开,通常情况下要清浮动如下

<div>
<ul style="float:left">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
<!--需要清理浮动-->
<div style="clear:both"></div>
</div>

用了很久这样的方法,每次写Repeater绑定的时候都要加个<div style="clear:both"></div>的标签,以前没有注意到这方面的东西.今天重新写样式的时候,就上网搜了下替代的方法.果然在Google中搜到了一篇How To Clear Floats Without Structural Markup的文章,灵活的处理了清空浮动的问题

  首先设置代码为:

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

这样我们只要对父级div引入这个clearfix的类即可

<div class="clearfix" >
<ul style="float:left">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>

这个css的原理是经过使用after伪对象,它将在应用clearfix的元素结尾添加content中的内容,也就是一个".",并且把他设置为块级元素(display="block");高度设置为0,clear="both",然后将其内容隐藏掉(visibility="hidden").这样就会撑开此块级元素.

  但是,IE并不支持.所以如果你需要兼容IE浏览器的话,可以设定以个Hack.

  如下:

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
} * html .clearfix {zoom: 1;}

这样我们就可以只在父级div引用class类解决了繁琐的清空步骤.

下面给出别的网站清空浮动的代码

/* 1种clear both方式 */
.clearfix:after { content: “.”; display: block; height: 0; clear: both; visibility: hidden }
.clearfix { zoom: 1; display: inline-block; _height: 1px }
*html .clearfix { height: 1% }
*+html .clearfix { height: 1% }
.clearfix { display: block } /*2种*/
.clearfix:after{content:”.”; display:block; height:0; clear:both; visibility:hidden;}
.clearfix{zoom:1;}

解决CSS中float:left后需要clear:both清空的更多相关文章

  1. 解决CSS中float:left后需要clear:both清空的繁琐步骤(转)

      之前,因为公司专门有CSS+DIV的切片设计师,所以我一直都是注重程序的设计与开发.现在,因为接了一些Web网站的项目需要制作,就在空闲时间学习起了CSS.Jquery. 现在,大部分的横排导航都 ...

  2. CSS中float和Clear的使用

    CSS中float和Clear的使用 本文和大家重点讨论一下CSS中Float和Clear属性的使用,一个float对象可以居左或居右,一个设置为float的对象,将根据设置的方向,左移或右移到其父容 ...

  3. 关于css中float的理解

    感觉css里的float是个非常神奇的东西,神奇之处在于,你知道它是什么意思,但是用的时候总是不知道怎么实现效果.又或者它会很容易地影响到别的元素和属性.所以今天打算尝试一下float的各种设置,看看 ...

  4. CSS中float属性

    这个东西叫浮动.顾名思义,就是让设置的标签产生浮动效果,就是脱离原来页面的标准输出流.正常情况下,HTML页面中块元素都是从上倒下排列的.如果想实现左右结构.float的一种选择(当然还有其他方法). ...

  5. 解决css的float父div没有高度

    在做页面设计常会碰到css的float父div没有高度的情况,HTML代码设计 <div class='box'> <div class='float_left'></d ...

  6. scss牛刀小试:解决css中适配浏览器前缀问题

    在css中为适配浏览器,新特性总加 -webkit,-o, -moz 来适配浏览器,写的烦心,看着也臃肿,让css可读性降低,下面以阴影为例,如何使用scss让我们的css看起来更简洁. 本人使用的I ...

  7. CSS学习系列4 -- 再说CSS中的浮动运用及clear:left/right实际用法

    在 CSS学习系列2 -- CSS中的清除浮动 中,我们详细说了CSS中清除浮动的方法及使用 后来我自己在项目开发一个需要使用浮动的网页时,进行了实际运用,加上后来看到一篇好文章.所以就在这里再次写篇 ...

  8. CSS中float与A标签的疑问

    <stype> a{ text-decoration:none; float:left;} </stype> <div class="box1"> ...

  9. CSS中float属性和clear属性的一些笔记

    在学习CSS的最后一部分内容中,float属性和clear属性比较难以用语言描述,因此在笔记本中无法准确的记录这两个属性的用法.所以在博客园上以图文的形式记录这两种属性的特征,以备以后查阅. 首先,定 ...

随机推荐

  1. js jqery判断checkbox是否选中,全选,取消全选,反选,选择奇数偶数项

    // 一,判断选中 // js var ischecked2 = function(){ // this.checked == true $(document.getElementsByTagName ...

  2. java系列--并发

    1.Executor 原博:http://blog.csdn.net/linghu_java/article/details/17123057 2.CountDownLatch()方法 浅析Java中 ...

  3. JavaWeb:EL & JSTL

    EL:全名为 Expression Language 1.语法:${sessionScope.user.sex}(从Session 的范围中,取得用户的性别), 所有的EL 都是以 ${  为起始,以 ...

  4. django QuerySet里那些常用又不常见的技巧

    QuerySet 像Entry.Objects.all(),这些操作返回的是一个QuerySet对象,这个对象比较特别,并不是执行Objects.all(),或者filter之后就会与数据库交互,具体 ...

  5. OSG世界坐标转屏幕坐标(转载)

    OSG世界坐标转屏幕坐标 #define M(row,col) m[col * 4 + row] void Transform_Point(double out[4], const double m[ ...

  6. Win10 的虛擬桌面

    Win10 的虛擬桌面我覺得蠻多餘的,平常很少用,除非是像以前的 "切換老闆鍵" ,老闆來了,你不想讓他知道你在幹嘛,趕快切換另外一個桌面. 切換工作視窗:Alt + Tab 叫出 ...

  7. iOS 添加导航栏两侧按钮

    self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"首页" style ...

  8. Php连接及读取和写入mysql数据库的常用代码

    在这里我总结了常用的PHP连接MySQL数据库以及读取写入数据库的方法,希望能够帮到你,当然也是作为我自己的一个回顾总结. 1.为了更好地设置数据连接,一般会将数据连接所涉及的值定义成变量. $mys ...

  9. php如何判断是手机访问还是电脑访问

    <?php function isMobile(){ $useragent=isset($_SERVER['HTTP_USER_AGENT']) ? $_SERVER['HTTP_USER_AG ...

  10. C/C++将一个整型数组拼接成一个字符串

    参考: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 #include <stdio.h> #include <string.h> int ma ...