Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

奇怪的浮动布局与等高

  这几年来,我平时都很少用浮动布局,非必要情况都使用 inline-block 布局,突然发现自己都生疏了。今天为一个奇葩的浮动布局问题调试了半小时,不过后来想想,好像这种情况还可以勉强实现等高布局,虽然不知道靠不靠谱,多少也是一种方法嘛。

代码是这样的

<!DOCTYPE html>
<meta charset="utf-8" />
<style>
.left {
  background: #CFC;
  width: 50%;
  float: left;
}
.right {
  background: #FCC;
}
.right:after {
  content: '';
  display: block;
  clear: both;
}
</style>

<div class="left">
这<br/>边<br/>有<br/>多<br/>高<br/>
另<br/>一<br/>边<br/>
就<br/>有<br/>多<br/>高<br/>
</div>
<div class="right">
那边有多高这边就有多高
</div>

擦,这是什么情况?

  其实给.right:after的初衷是它内部的元素是浮动的,会使它失去高度,所以需要一个东西来“清除浮动”。但是这个:after加上之后,元素的高度变得和左边的块一样高,这到底是什么情况。

原理

  其实,我们只要把插入的内容显示出来就很容易理解

  本来浮动元素和块元素是不同的层次,它们是同级重叠的关系。但由于.right中有clear:both的元素,它不可能和浮动元素呆在同一行,所以它就只能呆在.left的末尾。而它本身又属于.right的后代,所以它撑开了.right

适用性

  我记得低版本IE是不支持块元素和行元素重叠的,所以那种情况下没法使用。其实这样的浮动行为也是属于规范的东西,标准浏览器都是可以支持。不过浮动元素和行元素在一起的逻辑我还是感觉太混乱了。目前暂且把它归为黑魔法类,我会去了解这个方法,但不会使用它。

网名:
54.198.108.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^