float

Web布局:浮动

把浮动放到今天来聊,可能很多小伙伴会觉得没有任何意义。会说“CSS都发展到这种程度了,Web的布局还会有谁用浮动呢”?那么真的是如此吗?浮动真的要退出CSS的舞台成为历史吗?我的答案是不可能的。不管CSS怎么发展,浮动都还有其存在的意义和作用,而且在一些场景中是离开不浮动的,最起码近几年之内是不可能的。至于为什么,请继续往下阅读。

float是如何工作的

虽然现在很少使用浮动,但在某些情况下,浮动是唯一可行的解决方案。偶尔会觉得很沮丧,因为我觉得浮动应该起作用但是它并没有。所以我决定研究下浮动的工作原理以及如何正确的使用浮动。

使用CSS伪元素模拟float:center效果

网页上实现float:left或者float:right效果并不是件困难的事情,但一直无法有一个类似于float:center的效果。就是浮动居中。就算是顶尖的CSSer要实现这样的效果也是一件非常困难的事情。那么这篇文章,将向大家展示了如何使用伪元素来模拟一个浮动居中的效果。

深入理解BFC和Margin Collapse

BFC其实没有那么神秘,BFC只是一个独立的布局环境,理解BFC对我们日常的布局设计上有着重要的帮助,并且BFC和Margin Collapse之间有着重要关联。另外文中还提到了clear float时候所产生'clearance'的计算。希望大家有所收获。

float深入剖析

float是什么?

float即为浮动,在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”。下面解释下这个定义中的几个名词的概念:

应不应该使用inline-block代替float

inline-block和float这样的基础问题总是有太多的争论,大到专业从业人员的讨论和争锋,小到我们这样的菜鸟也拿他们来对比。不过我更关注的是我们什么时候使用inline-block来实际些,什么时候使用float又方便些。必竟有太多的理论与原由我们找不清楚(一时整不明白,或者说直到你退休也整不明白,至少我是这么认为的),与其花时间去争论他们哪个好哪个坏,还不如了解一下哪个用在什么场合适当些,这样或许能帮你解决很多实际性的问题。如果你感兴趣,就看看99为大家翻译的这篇文章《应该不应该使用inline-block代替float》。

CSS的Float之二

说起浮动大家并不陌生,因为有 Word 中看到太多的浮动围绕现象。我们可以看一下印刷设计来了解它的起源和作用。印刷布局中,文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”

CSS的Float之一

Float在CSS中是一个重中之重的东西,因为他是一个强大的,极有作用的一个CSS属性,但如果你没有理解透这个Float的话,那将是一个难搞的事情,特别是对于初学者来说,更是一个棘手事情。那么从今天开始我们一起来探讨这个Float

刚才说过了,Float是一个极有用的属性,首先表现在布局上,全前提是你要清楚他,了解他。这样才能达到知已知彼,方能百战百胜。下面我们先来看一段代码:

HTML Markup

Clear Float

众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑开。换句简单好理解的话来说,假如你在写CODE时,其中div.A(这个就是说页面中有一个div,并且把其命名为class="A")中包含了两个或多个子元素div.B,div.C,div.D(这里我以三个为例),并且此时div.B和div.C进行浮动,而div.D不进行任何浮动,此时你可以看到父元素div.A高度仅靠div.D来撑开其高度,如果您将div.A所有子元素进行浮动,当你没有清除内部浮动时,此时会导致浮动的父元素div.A无法自动撑开本身的高度。也就是说:当一个元素是浮动的,如果没有关闭浮动时,其父元素不会包含这个浮动元素,因为此时浮动元素从文档流中脱离。下面我们先来看看这两种现像的实例:

返回顶部