围住浮动元素的三种方法

learn_shifeng 发布于2019-08-29 11:19 / 1827人阅读

摘要：为了使包住浮动元素，有以下方法。由于包含元素一定会包围非浮动元素，而且清除会让这个子元素位于浮动元素的下方，因此包含元素一定会包含这个子元素以及前面的浮动元素。


    
    It"s fun to float.

Here is the footer element that runs across the bottom of the page.

这是一张带标题的图片，图片和标签包含在一个section元素，section后面紧跟着一个footer元素。
接下来是CSS代码：

section{border:1px solid blue; margin: 0 0 10px 0;}
img{float:left;}
footer{border:1px solid red;}

可以想象，浮动图片后标题跑到了右边，section也收缩到只包含文本的高度，footer也跑到了上面，紧挨着section。为了使section包住浮动元素，有以下方法。

方法一：为父元素添加overflow:hidden 方法二：同时浮动父元素

section{border:1px solid blue; float:left; width:100%;}
img{float:left;}
footer{border:1px solid red; clear:left;}

浮动section以后，不管其子元素是否浮动，它都会紧紧地包围（收缩包裹）住它的子元素，因此，需要用width:100%再让section与浏览器同宽。另外，由于section也浮动了，为了强制让footer在section下方，要给它应用clear:left。

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

添加一个非浮动的子元素，然后清除它。由于包含元素一定会包围非浮动元素，而且清除会让这个子元素位于浮动元素的下方，因此包含元素一定会包含这个子元素以及前面的浮动元素。方法有两种。

第一种：


    
    It"s fun to float.
    

Here is the footer element that runs ...

CSS:

section{border:1px solid blue;}
img{float:left;}
.clear_me{clear:left}
footer{border:1px solid red;}

第二种：

第一种添加一个纯表现性元素不太好，可以添加一个用CSS来添加这个清除元素的方法。


    
    It"s fun to float.

Here is the footer element that runs ...

.cleatfix:after{
    content:".";
    display:block;
    height:0;
    visbility:hidden;
    clear:both;
}

以上三种方法的使用要因地制宜，比如，不能在下拉菜单的顶级元素使用overflow:hidden；不能对已经靠自动外边距居中的元素使用“浮动父元素”技术。

GPU云服务器云服务器云计算的三种服务模式 asp支持的三种控件服务器的三种存储方式阿里云发送邮件的三种方式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111574.html

围住浮动元素的三种方法

摘要：由于包含元素一定会包围非浮动的子元素而且清除会让这个子元素位于清除一侧浮动元素的下方因此包含元素一定会包含这个子元素以及前面的浮动元素。浮动元素脱离了文档流,其父元素也看不到它了,因而也不会包围它。这种情况有时候并非我们想要的,下面向大家传授三种围住浮动子元素的方法。记住,这三种方法你都得掌握,这样才能审时度势,选择最合适的一种。为了演示浮动元素的行为,这种行为对布局会产生...

Bowman_han 2019-08-28 18:07 评论0 收藏0
CSS 设计指南学习笔记二

摘要：原文地址本篇文章是笔者的设计指南学习笔记的第二部分，由于最近都在准备期末考的事，所以都没来得及对设计指南进行一些总结，没有看之前第一部分的话也可以从这里传送过去。原文地址：http://justclear.github.io/css-stylin-with-css-note-2 本篇文章是笔者的《CSS 设计指南》学习笔记的第二部分，由于最近都在准备期末考的事，所以都没来得及对 ...

printempw 2019-08-30 12:47 评论0 收藏0
CSS学习笔记(六) 元素定位

摘要：方法一为父元素添加方法二同时浮动元素方法三添加非浮动的清除元素定位布局的核心是属性，对元素盒子应用这个属性，可以相对于它在常规文档流中的位置重新定位。绝对定位绝对定位会把元素彻底从文档流中拿出来，然后相对于其他元素默认是定位上下文定位。 1.盒模型盒模型，就是浏览器为页面中的每个 HTML 元素生成的矩形盒子。这些盒子们都要按照可见版式模型（visual formattin...

浠ラ箍 2019-08-28 18:03 评论0 收藏0
CSS入门指南-2：盒子模型、浮动和清除

摘要：会在元素内容而不是元素后插入一个伪元素使用意味着中新增的子元素会被清除左右浮动元素。这一篇主要介绍了盒子模型，浮动和清除。这是CSS设计指南的读书笔记，用于加深学习效果。上一篇介绍了css 的工作原理，这一篇主要介绍盒子模型和浮动。盒子模型所谓盒子模型，就是浏览器为页面中的每个HTML元素生成的矩形盒子。这些盒子们都要按照可见版式模型在页面上排布。可见的页面版式主要由三个属性...

ConardLi 2019-08-29 12:59 评论0 收藏0
CSS入门指南-2：盒子模型、浮动和清除

摘要：会在元素内容而不是元素后插入一个伪元素使用意味着中新增的子元素会被清除左右浮动元素。这一篇主要介绍了盒子模型，浮动和清除。这是CSS设计指南的读书笔记，用于加深学习效果。上一篇介绍了css 的工作原理，这一篇主要介绍盒子模型和浮动。盒子模型所谓盒子模型，就是浏览器为页面中的每个HTML元素生成的矩形盒子。这些盒子们都要按照可见版式模型在页面上排布。可见的页面版式主要由三个属性...

charles_paul 2019-08-01 17:13 评论0 收藏0