AI 助理
备案控制台
开发者社区 云原生 文章 正文

你所不了解的float（滥用float的怪异现象） (转)

2015-08-01 1787
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 阅读目录 float设计初衷就是为了实现文字环绕效果 如何解决浮动造成的父容器塌陷？ 兼容各浏览器清除浮动的通用方式 滥用浮动 运用浮动的一些特性 浮动与布局 浮动与单侧固定布局 浮动与智能自适应的流体布局 让IE7飙泪的浮动问题 包含clear的浮动元素包裹不正确 浮动...

float设计初衷就是为了实现文字环绕效果

原本页面流布局显示如上图所示，运用了float属性后就显示为如下图所示，这就是浮动的设计初衷

 

float的一些特性：包裹性、破坏性。

包裹的特性其实主要有三个表现：收缩、坚挺、隔绝。

float破坏性主要表现在使父容器塌陷（浮动使得父容器塌陷是标准而非bug，否则如果不让父窗口塌陷怎么实现文字环境效果）

浮动的破坏性只是单纯的为了实现文字环绕效果

BFC（block format context）块级格式化上下文

如何解决浮动造成的父容器塌陷？

也就是说有两种方法来解决，那么这两种方法实现的差异在哪？

clear方式的具体实现？

但是上述方法会有如下图所示不足

BFC/hasLayout具体实现方式？

兼容各浏览器清除浮动的通用方式

.clearfix:after{content:'';display:block;height:0;overflow:hidden;clear:both;} .clearfix{*zoom:1;}

其实还有更好的方式

复制代码 
        .clearfix:after
        {
            content: '';
            display: table; clear: both; } .clearfix { *zoom: 1; }
复制代码

 

滥用浮动

其实.clearfix的样式只应用在包含浮动子元素的父级元素上。

如果放到不包含浮动子元素的父级元素上那就是滥用。如果乱用hasLayout往往会让IE6/IE7做出出格的事情，因为浮动会触发hasLayout，所以滥用浮动会发生很多怪异现象。

 

打句广告：在html中一般会用nbsp;来表示空格，事实上nbsp原来是如下图所示的意思

运用浮动的一些特性

用demo先来说说第2个特性吧，html代码如下所示：

复制代码 
<!doctype html>
<html> <head> <meta charset="utf-8"> <title>浮动与display:block化</title> <style> .ovh { overflow: hidden; } .red { color: #cd0000; } [hidden] { display: none; } </style> </head> <body> <p id="first">这是一个没有设置<code>float</code>属性的按钮：</p> <p class="ovh"><input type="button" id="btnShow" value="点击我显示display属性值"></p> <p hidden="">此时，按钮的display属性值是：<span id="result" class="red"></span></p> <p>点击下面的按钮让上面的按钮添加<code>float: left</code>的声明：</p> <p><input type="button" id="btnAdd" value="上面的按钮添加float:left"></p> <script> var btnShow = document.getElementById("btnShow"), btnAdd = document.getElementById("btnAdd"), result = document.getElementById("result"), first = document.getElementById("first"); if (btnShow && btnAdd && result) { btnShow.onclick = function () { // 获得该按钮的display值 var display = this.currentStyle ? this.currentStyle.display : window.getComputedStyle(this, null).display; // 显示结果  result.innerHTML = display; result.parentNode.removeAttribute("hidden"); // repain fix IE7/IE8 bug  document.body.className = "any"; }; // 设置浮动按钮的点击事件  btnAdd.onclick = function () { btnShow.style["cssFloat" in this.style ? "cssFloat" : "styleFloat"] = "left"; // 文字描述的变化 this.value = "上面的按钮已经设置了float:left"; btnShow.value = "再次点击我确认display属性值"; first.innerHTML = first.innerHTML.replace("没有", '<del>没有</del>'); // 结果隐藏  result.parentNode.setAttribute("hidden", ""); // 按钮禁用 this.setAttribute("disabled", ""); }; } </script> </body> </html>
复制代码

从上述代码运行效果图可知原先为display:inline-block的元素由于增加了float:left则变成display:block

再说说浮动去空格吧

示例代码如下：

<!doctype html>
<html> <head> <meta charset="utf-8"> <title>浮动去空格</title> <style> button { margin: 0; } p { clear: both; } </style> </head> <body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <p><input type="button" id="trigger" value="点击按钮浮动"></p> <script> var trigger = document.getElementById("trigger"), buttons = document.getElementsByTagName("button"); var length = buttons.length; if (trigger && length > 0) { trigger.onclick = function () { for (var index = 0; index < length; index += 1) { buttons[index].style["cssFloat" in trigger.style ? "cssFloat" : "styleFloat"] = "left"; } }; } </script> </body> </html>
View Code

运行效果图如下

原先按钮之间是有空格的，点击下面增加浮动按钮后，原先按钮就没有任何空格了，事实上并非空格去掉了，只是空格移动父容器所有浮动元素最后

浮动与布局

最简单的应用莫过于

浮动与单侧固定布局

有两种方法

1、左边元素使用width+float，右边元素使用padding-left或者margin-left

2、左边元素使用width+float，右边元素也使用width+float不过这次是用right值

如下所示

复制代码 
        .left_img
        {
            width: 56px;
            float: left;
        }
        /* 下面这个是固定布局写法 */ .right_text_fixed { width: 484px; float: right; } /* 下面这个是流体布局写法 */ .right_text_flow { margin-left: 76px; }
复制代码

 

浮动与智能自适应的流体布局

核心代码如下所示：

复制代码 
        .left_img
        {
            float: left;
            margin-right: 20px;
        }
        /* 下面这个是固定布局写法 */ .right_text { display: table-cell; *display: inline-block; width: 2000px; *width: auto; }
复制代码

 

让IE7飙泪的浮动问题

一个一个来说（我说的是在IE7及以下浏览器）

包含clear的浮动元素包裹不正确

html代码如下所示：

复制代码 
<!doctype html>
<html> <head> <meta charset="utf-8"> <title>含clear的浮动元素包裹不正确的bug</title> <style type="text/css"> html, body { background: #fff; color: #000; } div { padding: 5px; margin: 5px; background-color: #eee; border: 1px solid #bbb; clear: left; color: black; float: left; } </style> </head> <body> <div> 这个&lt;div&gt; 包含 float: left 和 clear: left. 与我们通常理解的表现一致，宽度就是文字内容的宽度。 </div> <div> 这个同样是一个 &lt;div&gt;, 左浮动，同时含有 clear: left 的 &lt;div&gt;. 因为这一段的文字内容很长，所以，按照我们通常的理解，这个 &lt;div&gt; 占据的长度应该有整个 body 这么长。但是，在 Internet Explorer 7 下，事与愿违。 这个具有左浮动，同时含有 clear: left 的 &lt;div&gt; 仅仅占据了部分body的内容区域宽度。---- 我是占位置的文字，我是占位置的文字，我是占位置的文字，我是占位置的文字，我是占位置的文字，我是占位置的文字，我是占位置的文字…… </div> <div> 这是第3个具有float: left 和 clear: left 的 &lt;div&gt; . 改变你浏览器的宽度。 </div> </body> </html>
复制代码

实现效果图如下：

当我们改变窗口大小时，效果图如下

浮动元素倒数2个莫名垂直间距bug

html代码

复制代码 
<!doctype html>
<html> <head> <meta charset="utf-8"> <title>浮动元素倒数2个莫名垂直间距bug（超过3浮动元素）</title> <style type="text/css"> html, body { background: #fff; color: #333; } div { width: 100px; } p { margin-right: 1px; } span { border: 1px solid #aaa; float: left; width: 120px; padding: 5px; } </style> </head> <body> <div> <p> <span>A</span> <span>B</span> <span>C</span> <span>D</span> </p> </div> </body> </html>
复制代码

也就是说当超过3个浮动元素时，浮动元素倒数第2个元素则会在ie7及以下浏览器出现垂直间距问题，显示如下图所示

浮动元素倒数2个浮动最后一个字符重复bug

html代码如下所示：

复制代码 
<!doctype html>
<html> <head> <meta charset="utf-8"> <title>浮动元素倒数2个浮动最后一个字符重复bug</title> <style type="text/css"> html, body { background: #fff; color: #333; } div { width: 100px; } p { margin-right: 1px; } span { float: left; width: 120px; } </style> </head> <body> <div> <p> <span>A</span> <span>B</span> <span>C</span> </p> </div> </body> </html>
复制代码

在ie7及以及显示效果图却出现如下所示让人哭笑不得的场景（居然多了一个C）

浮动元素与文本不在同一行的问题

html代码如下所示：

复制代码 
<!doctype html>
<html> <head> <meta charset="utf-8"> <title>浮动与同一行的差异</title> <style type="text/css"> html, body { background: #fff; color: #333; } div { background-color: #eee; border: 1px solid #bbb; padding: 5px; } span { float: right; } </style> </head> <body> <div> 左侧标题 <span>右浮动</span> </div> </body> </html>
复制代码

出现如下所示效果图(是不是会很无语)

如何使用float不出现上述所述怪异现象

不用使用浮动去做一些堆砖头的布局，使用流体布局相关的方法就可以避免怪异问题，总之就是不要滥用浮动

文章是看幕课网张鑫旭的视频进行的笔记总结  在此贴出视频的地址http://www.imooc.com/learn/121  

在此还推荐一下王朋福博客css系列  写的也挺不错的

 

http://www.cnblogs.com/liyunhua/p/4670908.html

文章标签：
容器
前端开发
developerguy
目录
相关文章
杰克.陈
|
前端开发 容器
你所不了解的float（滥用float的怪异现象）
原文:你所不了解的float（滥用float的怪异现象） float设计初衷就是为了实现文字环绕效果 原本页面流布局显示如上图所示，运用了float属性后就显示为如下图所示，这就是浮动的设计初衷   float的一些特性：包裹性、破坏性。
杰克.陈
1354 0
蓝易云
|
6月前
|
存储 Java
百度搜索：蓝易云【Java语言之float、double内存存储方式】
由于使用IEEE 754标准进行存储，float和double类型可以表示非常大或非常小的浮点数，并且具有一定的精度。然而，由于浮点数的特性，它们在进行精确计算时可能会存在舍入误差。在编写Java程序时，需要注意使
蓝易云
96 0
米果粒
|
24天前
|
存储 C语言
使用 sizeof 操作符计算int, float, double 和 char四种变量字节大小
【10月更文挑战第13天】使用 sizeof 操作符计算int, float, double 和 char四种变量字节大小。
米果粒
65 1
萝卜丝丸子
|
4月前
|
存储 编译器 C++
C++从遗忘到入门问题之float、double 和 long double 之间的主要区别是什么
C++从遗忘到入门问题之float、double 和 long double 之间的主要区别是什么
萝卜丝丸子
83 0
三分钟热度的鱼
|
4月前
|
存储 SQL 数据库
MySQL设计规约问题之为何推荐用DECIMAL代替FLOAT和DOUBLE来存储精确浮点数
MySQL设计规约问题之为何推荐用DECIMAL代替FLOAT和DOUBLE来存储精确浮点数
三分钟热度的鱼
39 0
龙腾九州
|
6月前
|
存储 C语言
计算 int, float, double 和 char 字节大小
计算 int, float, double 和 char 字节大小。
龙腾九州
74 3
龙腾九州
|
存储 C语言
C 语言实例 - 计算 int, float, double 和 char 字节大小
C 语言实例 - 计算 int, float, double 和 char 字节大小。
龙腾九州
92 1
常温510
|
6月前
|
C#
C# 字节数组与INT16,float,double之间相互转换，字符数组与字符串相互转换，
C# 字节数组与INT16,float,double之间相互转换，字符数组与字符串相互转换，
常温510
176 2
Y君的进化史
|
C++
C/C++ 关于double和float两种类型的区别
C/C++ 关于double和float两种类型的区别
Y君的进化史
164 0
C/C++ 关于double和float两种类型的区别
龙腾九州
|
存储 C语言
计算 int, float, double 和 char 字节大小
C 语言实例 - 计算 int, float, double 和 char 字节大小。
龙腾九州
92 1