前端知识-float的使用

前端刚开始html界面的时候，对于我来说最头疼的莫过于div与css配合的时候各种不听使唤，而其中最讨厌的当属float浮动。自己精心想好了一个高（很）大（low）上（逼）的页面布局，信心满满开始敲代码，结果打开网页，各种图片乱飞，布局也全是乱的。

我相信，对于很多初学者（至少我是这样的），一开始写父级的div习惯于将其高度与宽v度定死，以此契合心中的设计。当得知float:left这一属性能将div自动从左向右顺序排列并迫不及待将其加入自己的代码后，出现了以下效果。

笨方法

第一种方法，行之有效但笨的可以。就是直接将所有的子div的高度“硬”设置为与父级div相同的数值。这样可以避免出现高度塌陷的问题。我在自己写的第一个仿京东首页，基本就是这样写死的。CSS代码就不贴了，缺点显而易见，扩展性极差，且对接下来的子div必须将高度设置成与父节点相同的值，且必须将里面所有的包括图片在内的所有元素高度设置成小于等于父节点的值，真是限制手脚。所以说这种方法，能别用尽量别用，这属于作茧自缚型编程。

清除浮动 - clear属性

为了清楚浮动，我们必须用到clear属性，用张鑫旭大神的说法，这事float的天然克星。一般来说，我们会在需要的div（但个人感觉基本上一个页面中所有的div应该都需要清除浮动）的css中加入clear:both这条属性来清除浮动。可以在编程中加入以下的代码。

1
2
3
4
5
div:after {
    content: '';
    display: table;
    clear: both;
}

我在自己设计自己的课程作业的网站中曾经就用过这种代码方法。这么写的话，所有div自动带有清除浮动的效果。但是也确实存在问题，clear:both后的元素依然可能存在“被环绕”的现象。在张鑫旭大神的书中，是文字错位现象（CSS世界，p159）。我所发现的是图片错位。我本人对于这种方式的解决方法是将已确认同一行的多个div在外部再包裹一个div。将after的影响包裹起来不外泄。效果来说比较可以，唯一的问题就是会造成hHTML代码冗余。此外，必须保证包裹的多个div宽度小于等于100%。容易造成后期页面改动造成一定的困扰。

清除浮动 - BFC

BFC全称block formatting context,意为“块级格式化上下文”。这个东西有这么一个表现原则，即无论一个块级元素的内部怎么折腾，不会影响外部元素。这种思想跟我在上文提到的用div包裹多个div防止外泄的思想有些类似。但BFC可以通过特定的CSS特性组合来触发，而不用自己去制造这么一个结界。触发的条件如下

  • html根元素
  • float ≠ none
  • overflow = scroll || auto || hidden
  • display = table-cell || table-caption || inline-block
  • position ≠ (relative || static)

只要符合其中任意一条，就可以告别clear属性了。查阅书籍可知，张鑫旭大神比较中意于使用overflow:hidden这个属性来做，唯一的缺点是一旦超出宽度，就会如字面意思那样被隐藏掉。这种做法我还没有尝试过，等真正试水了再贴代码。