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

沧海一滴 2024-10-26 14:07:52 原文

阅读目录

float设计初衷就是为了实现文字环绕效果
如何解决浮动造成的父容器塌陷？
兼容各浏览器清除浮动的通用方式
滥用浮动
运用浮动的一些特性
浮动与布局
浮动与单侧固定布局
浮动与智能自适应的流体布局
让IE7飙泪的浮动问题
包含clear的浮动元素包裹不正确
浮动元素倒数2个莫名垂直间距bug
浮动元素倒数2个浮动最后一个字符重复bug
浮动元素与文本不在同一行的问题
如何使用float不出现上述所述怪异现象

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>

运行效果图如下

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

浮动与布局

最简单的应用莫过于

浮动与单侧固定布局

有两种方法

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

你所不了解的float（滥用float的怪异现象） (转)的更多相关文章

你所不了解的float（滥用float的怪异现象）
float设计初衷就是为了实现文字环绕效果原本页面流布局显示如上图所示,运用了float属性后就显示为如下图所示,这就是浮动的设计初衷 float的一些特性:包裹性.破坏性. 包裹的特性其实主要有三 ...
Texture2D.GetPixelBilinear(float u, float v)的使用，官方例子注释
using UnityEngine; using System.Collections; public class TEST : MonoBehaviour { public Texture2D so ...
block中出现此种报错： Incompatible block pointer types initializing 'float (^__strong)(float, float)' with an expression of type 'int (^)(float, float)'
当block(代码块)的返回值是float时,应注意的地方:定义的返回值类型一定要与return的返回值类型一样我们以两个数的四则运算来举例在main.m文件中的四则运算中,我采用两种返回值类型( ...
memcpy - how to copy float* to float* variable
how to copy float* to float* float* seg_segmap = new float[OUTPUT_H * OUTPUT_W]; float* temp = new f ...
float和Float的区别
float是基本数据类型,Float是包装类(封装类).封装类可将接本数据类型封装后当作对象进行操作,并为各种基本数据类型提供各种转换功能.例如Float f = new Float(3.4f);,即 ...
public static float CompareExchange(ref float location1,float value,float comparand)
https://msdn.microsoft.com/en-us/library/k9hz8w9t(v=vs.110).aspx Compares two single-precision float ...
Animator.SetFloat(string name,float value,float dampTime,float deltaTime)详解
一般来说,我们用到的是这个API: animator.SetFloat("Speed",2.0f); 但是这个还有一个重载的方法,叫做: Animator.SetFloat(str ...
c、c++中-int型以float或者float型以int输出问题
1.将浮点型以整形的类型输出问题用VC6.0,会把以整形输出形式的浮点数输出为0: 1 #include"stdio.h" 2 int main() 3 { 4 float x= ...
boolean和Boolean, char和Character , byte和Byte, short和Short, int和Integer , long和Long , float和Float, double和Double的区别 , String和StringBuffer的区别
Java提供两种不同的类型:引用类型和原始类型(内置类型).Int是java的原始数据类型,Integer是java为int提供的封装类. Java为每个原始数据类型提供了封装类. 其中原始数据类型封 ...

随机推荐

初识Mongodb之[CURD]-PHP版
行动在了实践之前,希望大家看一下上面的学习资源,了解一下基本操作. 数据连接初始账号password 账号:admin password:admin 首先我们建立一个文件:mongodb.php,设 ...
Unity3D入门(二)：碰撞检測
碰撞器由来 1.系统默认会给每一个对象(GameObject)加入一个碰撞组件(ColliderComponent),一些背景对象则能够取消该组件. 2.在unity3d中,能检測碰撞发生的方式有两种 ...
cocos2d-x 2.2.3 创建项目的方法
直接复制粘贴到txt文本,然后修改后缀为.bat,然后将bat文件放到tools\project-creator的目录下即可. :project_input @echo 请输入项目名称,按回车,例:H ...
Git双机同步
如果使用git init 初始化,当客户端仓库push内容时,服务器端仓库可以看到log,但是更新的文件不能显示,必须使用git reset --hard才能更新内容
Apache Phoenix JDBC 驱动和Spring JDBCTemplate的集成
介绍:Phoenix查询引擎会将SQL查询转换为一个或多个HBase scan,并编排运行以生成标准的JDBC结果集. 直接使用HBase API.协同处理器与自己定义过滤器.对于简单查询来说,其性能 ...
Hive综合HBase——经Hive阅读/书写 HBase桌子
社论: 本文将Hive与HBase整合在一起,使Hive能够读取HBase中的数据,让Hadoop生态系统中最为经常使用的两大框架互相结合.相得益彰. watermark/2/text/aHR0cDo ...
Android开发工具综述，开发人员必备工具
安卓开发工具汇总.开发者必备.安卓开发过程中须要用到各种工具,作为一名安卓开发者,有木有感到亚历山大,那么多工具! 今天给大家汇总了一下安卓开发工具,安卓开发者必备利器. 1.Draw 9-Patch ...
Emacs经常使用快捷键的注意事项
一直用VIM,尝试了好几次Emacs都被它"多得像天上的星星"一样的快捷键给吓倒了.这几天最终下定决心再次尝试. 将它的Tutor练习了一下,顺便对经常使用快捷键做了一下笔记,方便 ...
轻松管理您的网络password
在互联网在现在这个时代,,我们注册了很多帐户.支付宝账号password,各种宝账户password.微信,QQ,电话password,购买各种网站,金融password,它是不是让孩子们的鞋子瞬间淡 ...
Apache Rewrite 理解
因为工作须要,查了一下Apache的文档,对当中反向引用和条件的运行做了理解和实验,以下是对Apache 2.2文档的摘录,并在上面做了实验的样例说明,希望能给一些须要深入理解的一些帮助. 其它部分就 ...