css知多少(9)——float下篇

原文:css知多少(9)——float下篇

  float内容比较多,咱们分上、下两篇来介绍,上篇已经写完,这是下篇。建议大家先把上篇看了,再来看下文,精彩内容不要掠过啊。

1. 清除float

  《上篇》中我们提到,float具有“破坏性”,它会导致父元素“坍塌”,这将不是所要看到的。如何去避免float带来的这种影响呢(也就是我们常说的“清除浮动”) ?方法有很多种,我在这里介绍4中供大家参考,大家可根据实际情况来选择。

  先介绍两个比较简单,但是不常用的解决方法:

  1. 为父元素添加overflow:hidden
  2. 浮动父元素

  这两个方法比较简单,在这里也就不再演示了,大家有兴趣的可以自己去试试。

  第三种方法也不是很常用,但是大家要知道clear:both这个东西。通过在所有浮动元素下方添加一个clear:both的元素,可以消除float的破坏性。

  

  接下来的第四种方法是大家最需要掌握的,也是我推荐的,也是bootstrap正在用的——clearfix——不知道的同学一定要去搜一下,要不然就太low了!

  

  上图中,我们定义一个.clearfix类,然后对float元素的父元素应用这一样式即可,非常简单吧?注意,你可能会搜出不同版本的clearfix,有的代码比上图中的代码多,你不用理会它,就按照我的贴图的代码写就行。

  究其原理,其实就是通过伪元素选择器,在div后面增加了一个clear:both的元素,跟第三种方法是一个道理。

2. 合理的使用float布局网页

  《上篇》中提到,我们使用float做网页布局,是一种误解和“误用”。估计大多数人误解了float的原本设计初衷,但是这里的“误用”是要加引号的,因为这是一种无心插柳的应用。即,用float做网页布局是很合情合理的,鼓励同志们继续使用。

  但是用float做网页布局也是有许多技巧的,准确的应用会提高网页的灵活性。下面我列举两个常用的网页布局案例,仅供大家参考,不喜勿喷,善意留言!

  

  第一,三列布局

  博客园的主页就是经典的三列布局,很明显的左、中、右。

  

  对于这种布局,我给出的布局方案是:

  

  第二,两列布局

  以博客园一篇文章的链接为例,它分为左、右结构

  

  对于这种布局的格式,我的设计方案是:

  

3. BootStrap的栅格系统

  如果您熟悉并使用bootstrap,那么您将不必自己去操心网页布局,因为bootstrap已经把网页分成了12列,您可以随意设置多列布局,非常方便。这就是bootstrap的栅格系统。此处不会详解栅格系统,就是简单看看栅格系统的实现,它是用float实现的。

  

  通过浏览器监控每个单元格的css样式,可以发现,单元格通过百分比设置了宽度,通过float:left设置了浮动。

  

  对于父元素的清除浮动,bootstrap使用的就是《上篇》中说的clearfix,大家可以自行检测一下试试。

  多看看经典软件的源码是学习的一个捷径,学习css可以看看bootstrap,学习js可以看看jquery……

4. 总结

  float内容非常多,有的css书籍中,也很难全面的讲解float这一知识点的全部内容。这就需要自己去多多看书,多多实践,多多看经典系统的源码,才能做到融会贯通,举一反十。

  大家共勉吧。

-------------------------------------------------------------------------------------------------------------

欢迎关注我的教程:从设计到模式深入理解javascript原型和闭包系列》《微软petshop4.0源码解读视频》《json2.js源码解读视频

也欢迎关注我的开源项目——wangEditor,简洁易用的web富文本编辑器

-------------------------------------------------------------------------------------------------------------

时间: 2024-08-24 14:57:57

css知多少(9)——float下篇的相关文章

css知多少(8)——float上篇

1. 引言 对于我们所有的web前端开发人员,float是或者曾经一度是你最熟悉的陌生人--你离不开它,却整天承受着它所带给你的各种痛苦,你以为它很简单就那么一点知识,但却驾驭不了它各种奇怪的现象. 这就是我们又爱又恨的--float.所以,系统的学一学float是非常非常重要的.除了看书和看博客文章之外,我推荐大家去看一个奇葩(声音很有磁性,你懂得)录制的教程<CSS深入理解之float浮动>,讲的很好很透彻. 2. 重新认识float 2.1.    误解和"误用" 既

css知多少(12)——目录

<css知多少>系列就此完结了.常来光顾的朋友可能会觉得突然:css的知识点还有很多,怎么突然就完了,还没讲完呢?这样说是对的.不过凡事都有一个定位,如果盲目求多,定位模糊,那样就没有目的没有方向了. 我的身份不是前端开发人员,而是产品经理.我规划的产品是一款项目管理软件,我也是一个PMP.我深知一个项目一定要有目标.范围.进度和质量要求.一旦达到,项目即可结束,准备下一个项目的启动.我接下来,要继续优化我的富文本编辑器wangEditor.还要把我之前写的<深入理解javascript

《css知多少》系列完结

<css知多少>系列就此完结了.常来光顾的朋友可能会觉得突然:css的知识点还有很多,怎么突然就完了,还没讲完呢?这样说是对的.不过凡事都有一个定位,如果盲目求多,定位模糊,那样就没有目的没有方向了. 我的身份不是前端开发人员,而是产品经理.我规划的产品是一款项目管理软件,我也是一个PMP.我深知一个项目一定要有目标.范围.进度和质量要求.一旦达到,项目即可结束,准备下一个项目的启动.我接下来,要继续优化我的富文本编辑器wangEditor.还要把我之前写的<深入理解javascript

《css知多少》系列完结,求推荐!

<css知多少>系列就此完结了.常来光顾的朋友可能会觉得突然:css的知识点还有很多,怎么突然就完了,还没讲完呢?这样说是对的.不过凡事都有一个定位,如果盲目求多,定位模糊,那样就没有目的没有方向了. 我的身份不是前端开发人员,而是产品经理.我规划的产品是一款项目管理软件,我也是一个PMP.我深知一个项目一定要有目标.范围.进度和质量要求.一旦达到,项目即可结束,准备下一个项目的启动.我接下来,要继续优化我的富文本编辑器wangEditor.还要把我之前写的<深入理解javascript

看《css知多少》的一些总结

问题 1.有些浏览器不完全支持css3,现在可以用哪个工具去检测浏览器是否支持,以及支持哪些项? modernizr:检测浏览器对HTML5和CSS3特性(至于modernizr的介绍,可以看我另外一篇博文HTML5系列四(特征检测.Modernizr.js的相关介绍)) 2.常用的html标签,它们的display属性一般默认为block和inline.有哪些常用标签的display不是block和inline,这些标签显示的时候和block/inline有何区别? 具体display属性值有

css知多少(7)——盒子模型

1. 引言 从这一节开始,我们就进入本系列的第三部分--css呈现.本部分将描述css在页面的几种布局和呈现的特性.包括两类:文字.块. 第一类--文字.这部分相对比较简单一些,例如设置字号.字体.颜色.背景色.是否加粗等.重点的地方在于设置字体.设置行高.文字相关的距离都用相对值,这些东西在<css知多少(4)--解读浏览器默认样式>那一节已经说过了.另外还有一个重点,就是web端最流行的字体库fontAwesome,关于它我之前有一篇文章专门讲过,请参见<请用fontAwesome代

css知多少(4)——解读浏览器默认样式

上一节<css知多少(3)——样式来源与层叠规则>介绍了样式的五种来源,咱们再通过一张图回顾一下. 对于上面的三层,咱们大概都比较熟悉了.下面的两层中,用户自定义样式一般也就是改一改字号大小和字体样式,也没甚好说的.而最有的说的就是浏览器的默认样式. 不同浏览器的默认样式多少有些区别,特别是老版本的浏览器之间,现在高级浏览器越来越向统一的标准靠拢,对前端程序猿来说是一件好事情.虽然有些许差异,但是绝大部分还是相同的,我先把代码粘贴出来 ,具体的解读咱们慢慢道来(只说重点,比较容易的或者不常用的

css知多少(3)——样式来源与层叠规则

上一节<css知多少(2)--学习css的思路>有几个人留言表示思路很好.继续期待,而且收到了9个赞,我还是比较欣慰的.没看过的朋友建议先去看看上一节. 这一节就开始实践上一节的思路! 1. "层叠"的概念 CSS--层叠样式表,其中的"层叠"是什么意思呢?层叠就是浏览器对多个样式来源进行叠加,最终确定结果的过程.举一个简单的例子: 上图中有两个样式来源,第一个是引用的css1.css,第二个是自己在style中编写的样式."层叠"是

css知多少(6)——选择器的优先级

1. 引言 上一节<css知多少(5)--选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的,而且两个设置的颜色不一样,这里的<span>到底听从谁的命令? 上面还是比较简单的,下面在来一个复杂的: 上图中的<li>该显示成什么颜色呢? 2. 特指度 要解决以上问题,我们需要引入一个概念--特指度(specificity).特指度表示一个css选择器表达式的重要程度,可以通过