Faster, Higher, Stronger
更快,更高,更强

围住浮动元素的三种方法

笔记来源:《CSS设计指南》(第3版)(图灵程序设计丛书)。

浮动元素脱离了文档流,其父元素也看不到它了,因而也不会包围它。这种情况有时候并非我们想要的。这里提供三种必须掌握的方法,在具体情况中选择合适的方法来围住浮动元素。

首先摆上实验案例:


section父元素内的span子元素

section父元素内的p子元素

section元素后面的footer元素
section父元素内的span子元素

section父元素内的p子元素

section元素后面的footer元素

现在我们看到的是常规文档流,即块级元素包围着所有子元素,而且在页面中自上而下相互堆叠在一起。假设我们想让p标签的段落内容位于span元素(已通过CSS设定为行内块级元素)的右侧,而不是像现在这样位于下方,我们需要对span元素添加float: left以便将span元素左浮动。


section父元素内的span子元素

section父元素内的p子元素

section元素后面的footer元素
section父元素内的span子元素

section父元素内的p子元素

section元素后面的footer元素

现在span元素的确浮动在了其后p元素的左侧,但是我们也看到了,由于span元素脱离了文本流,父元素section看不到span元素,就根据其内剩下的p元素的高度重新调整自己的高度了(section只包含了非浮动子元素)。section后面的footer元素仍然紧挨着重新调整高度后的section元素,这符合我们的理解,但这不是我们想要的。我们希望footer元素在视觉上仍然位于span内容的下方。怎么办呢?

方法一:为父元素添加overflow: hidden

第一个方法很简单,缺点是不太直观,即为父元素应用overflow: hidden,以强制它包围浮动子元素。


section父元素内的span子元素

section父元素内的p子元素

section元素后面的footer元素
section父元素内的span子元素

section父元素内的p子元素

section元素后面的footer元素

方法二:同时浮动父元素&width: 100%

我们给span的父元素section元素也添加float: left以让section元素浮动起来。浮动section以后,不管其子元素是否浮动,它都会紧紧地包围(也称收缩包裹)住它的子元素。因此,需要用width: 100%再让section的宽度撑满其父元素的内容区宽度。


section父元素内的span子元素

section父元素内的p子元素

section元素后面的footer元素
section父元素内的span子元素

section父元素内的p子元素

section元素后面的footer元素

方法三:添加非浮动的清除元素

第三种强制父元素包含其浮动子元素的方法,就是给父元素的最后添加一个非浮动的子元素,然后清除该子元素。由于父元素一定会包含非浮动的子元素,而且清除会让这个子元素位于(清除一侧)浮动元素的下方,因此父元素一定会包含这个子元素——以及前面的浮动元素。在父元素内最后添加子元素作为清除元素的方式有两种。

第一种方式是简单地在HTML标记中添加一个子元素(div很适合这个目的,因为它在无子元素时的默认高度为零,不会引入多余空间),并给它应用clear属性,如下所示。但这种过方式会在HTML中引入没有实际语义的纯表现性元素。


section父元素内的span子元素

section父元素内的p子元素

section元素后面的footer元素
section父元素内的span子元素

section父元素内的p子元素

section元素后面的footer元素

另外一种方法就是使用:after伪元素可以帮助我们实现这个目的,思路其实和上面的方法是一样的。



section父元素内的span子元素

section父元素内的p子元素

section元素后面的footer元素
section父元素内的span子元素

section父元素内的p子元素

section元素后面的footer元素

提醒一下,这里的:after伪元素对应元素内部的末尾位置,而不是元素本身之后的下一个位置。

赞(0) 打赏
未经允许不得转载:峰间的云 » 围住浮动元素的三种方法

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏