Float 的那些事

css float

定义元素浮动到左侧或者右侧。其出现的本意是让文字环绕图片而已。

left、right、inherit(从父级元素获取float值)、none

一、浮动的性质

1. 包裹性

  display:inline-block某种意义上的作用就是包裹(wrap),而浮动也有类似的效果。举个常见例子,或许您有实现宽度自适应按钮的经验,实现宽度自适应的关键就是要让按钮的大小自适应于文字的个数,这就需要按钮要自动包裹在文字的外面。我们用什么方法实现呢?一就是display:inline-block;二就是float。

  浮动属性(无论是左浮动还是右浮动)某种意义上而言与display:inline-block属性的作用是一模一样的

  区别:浮动的方向性

  display:inline-block仅仅一个水平排列方向,就是从左往右,而float可以从右往左排列

2. 破坏性

  2.1 float元素不占据正常文档流空间

    由于浮动块不在文档的普通流中,所以文档的普通流中的块表现得就像浮动块不存在一样。

    3块div均未加float

    块1享有浮动,脱离文档流并且向右移动

     块1向左浮动。IE8和Firefox中因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了块2,使块2从视图中消失。而IE6和IE7中紧跟在浮动元素块1的块2也会跟着浮动。如下图

  2.2 浮动“塌陷”

    对父元素的影响:如果父元素只包含浮动元素,且父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零。

此类情况出现原因

    浮动的“本职工作”:文字环绕显示;“非本职工作”:列表布局;证据:高度塌陷

    所以浮动元素塌陷的问题根本就不是浏览器的bug,而是我们没有正确地深入地了解浮动,是我们自己使用不当,因为浮动本不应该用在这里的。

解决方案

    ① 在使用float元素的父元素结束前加一个高为0宽为0且有clear:both样式的div

<div>
    <div><span>块1</span> float:left </div>
    <div><span>块2</span> float:left</div>
    <div><span>块3</span> float:left</div>
    <div></div>
</div>

    ② 在使用float元素的父元素添加overflow:hidden;

    ③ 使用after伪对象清除浮动

3. float与JavaScript

  使用JavaScript设置float不能使用 obj.style.float="left"; 

  IE:

obj.style.styleFloat = "left";

  其他浏览器:

obj.style.cssFloat = "left";

推荐参考 文一 文二

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏软件开发

CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法

一、BFC与IFC 1.1、BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline For...

2838
来自专栏Nian糕的私人厨房

Canvas 让你的屏幕下一场 Hacker 流星雨吧

今天来分享一个很狂拽酷炫吊炸天的特效,其装逼效果不亚于上面那张入侵五角大楼导弹制导系统的概念图(手动滑稽),实现起来很简单,跟着动手一起来吧

902
来自专栏练小习的专栏

比例字体&等宽字体

我们都知道等宽字体和比例字体的区别,就在于比例字体(Monospaced Font)即每个字母宽度是按一定比例自动调整的,而等宽字体(Proportional ...

6476
来自专栏用户2442861的专栏

CSS浮动 (比较详细、生动、经典)

首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流。如下图:

2092
来自专栏进击的君君的前端之路

CSS理解之Float

1644
来自专栏Coco的专栏

浅析inline-block--使用inline-block创建布局

1967
来自专栏web前端

HTML+CSS高级

第一章 ...

7386
来自专栏Golang语言社区

【Go 语言社区】iframe去边框,无边框,使用大全

<iframe src=”you page’s url” width=”100″ height=”30″ frameborder=”no” border=”0″...

3797
来自专栏Python研发

CSS

CSS是Cascading Style Sheets的加简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离。

1983
来自专栏前端说吧

CSS-垂直|水平居中问题的解决方法总结

5426

扫码关注云+社区

领取腾讯云代金券