文档章节

css float浮动详解

 月心寒
发布于 2016/11/19 19:00
字数 2137
阅读 10
收藏 2
点赞 0
评论 0

css float浮动详解

@(css float)[hasLayout|clear float|妙瞳]

css float的定义和用法

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。
注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。

默认值:none;
继承性:no;
版本:CSS1
JavaScript 语法:object.style.cssFloat="left";

可能的值

值                       描述
left                    元素向左浮动。
right                   元素向右浮动。
none                    默认值。元素不浮动,并显示在其在文本中出现的位置。
inherit                 规定应该从父元素继承 float 属性的值。

简单示例


这里用到了float:left;我们把 ul 元素和 a 元素浮向左浮动。

clear float

  • clear float 是什么?
    很多人习惯的把clear float 翻译成“清除浮动”,我觉得针对我们由于浮动造成的问题,我们要做的是清楚浮动所造成的影响,而不单单只是清除浮动,还包括闭合浮动,让浮动不要影响其他的元素。

  • 为什么要clear float?
    之所以要clear float,并不是我们看float不爽,而是,在某些情况下,float造成了我们布局上的问题,使我们不得不去清除float带来的影响。如下列举一些float造成的布局问题及clear float方法:
    代码以及效果图如下:


上述事例表明,如果内层div浮动的话,那么在没有给父div设置高度,padding,margin的情况下,父的高度为0,而我们知道,父容器的高度可以被内层的内容的高度撑大,这就是由于float造成的高度塌陷问题。

假如我们给父容器设置了高度的情况会是如何?
代码以及效果图如下:



我们发现,当给父容器设置高度时,高度不为0,而是为我们设置的200px;

假如我们给父容器设置margin和padding,情况又是如何?
代码以及效果图如下:


上述事例表明,如果我们没有给父div设置高度,只设置padding和margin,如效果图所示,实际上的高度等于上下border,加上上下padding,加上margin,而content的高度还是为0,还是因为float的原因,高度塌陷。

针对这种情况,clear float方法如下:
方法一:添加新的元素标签 ,应用 clear:both;
代码及效果图如下:



上述事例表明,当用clear:both;父div的高度由子层的高度撑大,content的高度变为50px;而且padding,margin都不受影响。此方法是优缺点如下:

  • 优点:易学易用,容易掌握。
  • 缺点:不符合结构和表现的分离,增加很多无用标签,不便后期维护,故不建议 使用。

方法二:父级div定义overflow:auto/hidden;(这里的父级div指div#wrap)
代码与效果图如下:


上述事例表明,通过方法二,也可以实现效果,content的高度也变为了50px,padding,margin都不受影响。

  • 原理
    Block Formatting Context (块级格式化上下文)是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。

在创建了 Block Formatting Context 的元素中,其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部,两个相邻的元素之间的垂直距离取决于 'margin' 特性。在 Block Formatting Context 中相邻的块级元素的垂直边距会折叠(collapse)。

  • BFC的用处

    非 BFC 元素,会忽略其添加 float 的子元素的高度值;其上下边距会与子元素的边距产生折叠;其内、外部的float元素会对自身以及其子元素布局产生影响。
    触发 BFC 是解决这三个问题的有效方式。这也就是为何可用overflow:hidden/auto来清除浮动等问题的原因。

  • 触发BFC的条件

"float"的值不是"none"
"overflow"的值不是"visible"
"display"的值是"table-cell"
"table-caption",或"inline-block"
"position"的值既不是"static"也不是"relative"

所以,使用overflow属性来清除浮动需注意,overflow属性共有三个属性值:hidden,auto,visible,scroll,inherit。我们可以使用hidden和auto值来清除浮动,但不能使用visible值,这个值将无法达到清除浮动效果,atuo和hidden两个值都ok,而且在IE6中都需要触发 hasLayout ,例如 zoom:1;
用overflow:auto;方法的优缺点如下:

  • 优点:符合结构和表现分离,代码量极少 。
  • 缺点:多个嵌套后,firefox某些情况会造成内容全选,不建议使用。
    用overflow:hidden;方法的优缺点如下:
  • 优点:符合结构和表现分离,代码量极少 。
  • 缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素,影响布局,不建议使用。

方法三:父元素也设置浮动
代码与效果如下:

  • 优点:符合结构和表现分离,代码量极少 。
  • 缺点:使得与父元素相邻的元素的布局会受到影响,一直找父容器来float,层层往上找,不推荐使用 。而且与margin:0 auto;水平居中冲突。
    方法四:使用 br标签 (br中的 clear="all" )
    这个方法有些小众,br 有 clear=“all | left | right | none” 属性 ;
    代码与效果如下:

  • 优点:比空标签方式语义稍强,代码量较少
  • 缺点:但是也不符合语义化,违背了结构与表现的分离。建议不要使用。
    方法五:父元素设置display:table;或者设置display:inline-block;
    代码与效果如下:





  • 优点:结构语义化完全正确,代码量极少
  • 缺点:display:table;盒模型属性已经改变,由此造成的一系列问题。建议不使用。display:inline-block;不能设置 margin:0 auto;

方法五:使用:after 伪元素
需要注意的是 :after是伪元素(Pseudo-Element),不是伪类(某些CSS手册里面称之为“伪对象”)。
由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。
该方法源自于: How To Clear Floats Without Structural Markup http://snipplr.com/view/86/clear-floats-without-structural-markup/
代码及结果如下:


  • 优点:结构和语义化完全正确,代码量居中 。
  • 缺点:复用方式不当会造成代码量增加。
    样式也可以这样写:
    .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
    .clearfix {display: inline-block;} /* for IE/Mac /


    由于IE/Mac市场占有率低,可以精简为:
    .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
    .clearfix { 
    zoom:1; }
    代码及效果图如下:



    其中clear:both;指清除所有浮动;content: '.'; display:block;对于FF/chrome/opera/IE8不能缺少,其中content()可以取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它,但是不显示出来,这样才能实现清除浮动。
    在写HTML代码的时候,发现在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。
    这个clearfix的CSS使用了after这个伪对象,它将在应用clearfix的元素的结尾添加content中的内容。在这里添加了一个句号".",并且把它的display设置成block;高度设为0;clear设为both;visibility设为隐藏。这样就达到了撑开容器的目的。这里解释下:
    CSS content 属性
  • 定义和用法
    content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容。
    说明
    该属性用于定义元素之前或之后放置的生成内容。默认地,这往往是行内内容,不过该内容创建的框类型可以用属性 display 控制。

    默认值: normal
    继承性: no
    版本: CSS2
    JavaScript 语法: object.style.content="url(beep.wav)"


    none
    normal
    content specifications
    inherit 规定应该从父元素继承 content 属性的值。

具体可以参考链接:http://www.w3school.com.cn/cssref/pr_gen_content.asp

© 著作权归作者所有

共有 人打赏支持
粉丝 0
博文 6
码字总数 0
作品 0
成都
CSS float相关详解

float属性是CSS常用的一个属性,应用场景广泛,同时也是一个难点,涉及到一些相关细节及注意点。因此,就特别整理总结一下。 一、float介绍 float元素也称为浮动元素,设置了float属性的元素...

Ruheng ⋅ 2017/12/05 ⋅ 0

CSS float浮动的深入研究、详解及拓展(一)

概念目录 个人感悟之CSS代码的情感化思维 个人观点之浮动的意义仅仅是文字环绕显示而已 个人观点之浮动的本质是“包裹及破坏” 个人观点之目前大多数浮动应用都不是浮动应该做的 个人观点之浮...

foodon ⋅ 2014/10/30 ⋅ 1

CSS 最核心的几个概念

原文网址链接:http://www.geekplux.com/2014/04/25/severalcoreconceptsofcss.html 本文将讲述 CSS 中最核心的几个概念,包括:盒模型、position、float等。这些是 CSS 的基础,也是最常用的...

数通畅联 ⋅ 2015/09/07 ⋅ 0

CSS float浮动的深入研究、详解及拓展(二)

接上回… 五、浮动的非本职工作 浮动的本职工作是让匿名inline boxes性质的文字环绕图片显示,而其他所有用浮动实现的效果都不是浮动应该做的事情,我称之为“非本职工作”。 或许我们并没有...

foodon ⋅ 2014/10/30 ⋅ 0

CSS清除浮动_清除float浮动

CSS清除浮动方法集合 一、浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了。 浮动产生样式效果...

单线程生物 ⋅ 2016/04/07 ⋅ 0

IE的hasLayout详解

什么是 haslayout ?     “Layout”是一个 IE/Win的私有概念,它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件/用户事件等,...

sunshinewyf ⋅ 2015/10/06 ⋅ 0

CSS Float(浮动)

什么是CSS Float(浮动)? CSS的Float(浮动),元素可以围绕其他元素向左或向右被推动 Float(浮动),往往是用于图像,但它在布局时一样非常有用。 元素怎样浮动 元素的水平方向浮动意味着元素只...

wybo521 ⋅ 2016/01/17 ⋅ 0

想要清晰的明白(一): CSS视觉格式化模型|盒模型|定位方案|BFC

视觉格式化模型 页面(文档树)可以想象成是由一个个的Box组合而成的,而视觉格式化模型(Visual formatting model)是一套规则,将这些框布局成访问者看到的样子。 哪些因素控制了这些布局 下文...

mooonx ⋅ 2017/11/29 ⋅ 0

div+css布局之float与clear的用法

CSS Float Layout Basics - CSS浮动布局基础:基于浮动的布局利用了float(浮动)属性来并排定位元素,并在网页上创建列。可以利用这个属性来创建一个环绕在周围的效果,例如环绕在照片周围,...

oecp ⋅ 2011/06/10 ⋅ 1

网页中自私自利且影响他人的Float

引言: 相信大家在用Html+Css编写网页时会经常用到css中float(浮动)这个属性吧,浮动能让我们很好进行页面的布局,但种种问题也随之而来。 一.float的基本属性及应用 这个属性叫漂浮,顾名...

JX2011 ⋅ 2013/12/02 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Mahout推荐算法API详解

前言 用Mahout来构建推荐系统,是一件既简单又困难的事情。简单是因为Mahout完整地封装了“协同过滤”算法,并实现了并行化,提供非常简单的API接口;困难是因为我们不了解算法细节,很难去根...

xiaomin0322 ⋅ 25分钟前 ⋅ 0

WampServer默认web服务器根目录位置

安装WampServer之后的web服务器根目录默认位置在WampServer安装目录下的www:

临江仙卜算子 ⋅ 27分钟前 ⋅ 0

Redux的一些手法记录

Redux Redux的基本概念见另一篇文。 这里记录一下Redux在项目中的实际操作的手法。 actions 首先定义action.js,actions的type,可以另起一个action-type.js文件。 action-type.js用来存...

LinearLaw ⋅ 28分钟前 ⋅ 0

android 手势检测(左右滑动、上下滑动)

GestureDetector类可以让我们快速的处理手势事件,如点击,滑动等。 使用GestureDetector分三步: 1. 定义GestureDetector类 2. 初始化手势类,同时设置手势监听 3. 将touch事件交给gesture...

王先森oO ⋅ 42分钟前 ⋅ 0

java 方法的执行时间监控 设置超时(Future 接口)

java 方法的执行时间监控 设置超时(Future 接口) import java.util.concurrent.Callable; import java.util.concurrent.ExecutionException; import java.util.concurrent.Executor......

青峰Jun19er ⋅ 46分钟前 ⋅ 0

一名开源小白的Apache成长自述

今天收到了来自Apache Vote我成为Serviceomb项目Committer的邮件,代表自己的贡献得到了充分的肯定;除了感谢团队的给力支持,我更希望将自己的成长经历——如何践行Apache Way的心得介绍给大...

微服务框架 ⋅ 49分钟前 ⋅ 0

vim介绍、颜色显示和移动光标、一般模式下复制、剪切和粘贴

1.vim 是 vi 的升级版 vim 是带有颜色显示的 mini安装的系统,一般都不带有vim [root@aminglinux-128 ~]# yum install -y vim-enhanced已加载插件:fastestmirror, langpacksLoading mir...

oschina130111 ⋅ 49分钟前 ⋅ 0

Deepin 操作系统四面楚歌

作为国内做的最好的 Linux 发行版,源自 Debian sid 的 Deepin 目前正面临重重困境,新版本不断延期,开发人员离职,bug 长期得不到修复,和 Debian/Ubuntu 的兼容性问题也面临越来越严重的挑...

六库科技 ⋅ 49分钟前 ⋅ 0

MyBatis之动态sql

我们需要知道的是,使用mybatis重点是对sql的灵活解析和处理。在原先的UserMappser.xml中,我们这样查询表中满足条件的记录 : 123 <select id="findUserList" parameterType="userQuery...

瑟青豆 ⋅ 50分钟前 ⋅ 0

这届俄罗斯世界杯的冷门那么多怎么办?

最纯粹的世界杯,最神奇的大冷门。 德国0比1被墨西哥摩擦了。 日本历史性的赢了哥伦比亚。 C罗也挑平了西班牙。 梅西被冰岛狮吼吼愣神了。 就连11次进世界杯4强的巴西也被瑞士逼平了。 天台已...

开源中国众包平台 ⋅ 50分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部