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

阅读目录

  • 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

时间: 2024-10-08 07:10:27

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

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

float设计初衷就是为了实现文字环绕效果 原本页面流布局显示如上图所示,运用了float属性后就显示为如下图所示,这就是浮动的设计初衷 float的一些特性:包裹性.破坏性. 包裹的特性其实主要有三个表现:收缩.坚挺.隔绝. float破坏性主要表现在使父容器塌陷(浮动使得父容器塌陷是标准而非bug,否则如果不让父窗口塌陷怎么实现文字环境效果) 浮动的破坏性只是单纯的为了实现文字环绕效果 BFC(block format context)块级格式化上下文 如何解决浮动造成的父容器塌陷? 也就是

Python基础练习r=input(&#39;半径r=:&#39;) 半径r=2 &gt;&gt;&gt;areas=3.14*float(r)*float(r) &gt;&gt;&gt;print(&#39;area:%s&#39;%(area)) area:12.5

1.简单输入输出交互. input('please input your name:') please  input your name:xfy 'xfy' 2.用户输入两个数字,计算并输出两个数字之和:(尝试只用一行代码实现这个功能). n=input('输入第一个数字:') 输入第一个数字:2 m=input('输入第二个数字:') 输入第二个数字:4 print(int(n)+int(m)) 6.0 3.输入半径,计算圆的面积. r=input('r=') r=2 print('圆的面积:

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 floating point numbers for equality and, if they are equal, replaces the first value. /// <summary> /// 比较location1和comparand的值,如果它们的值相等,就用value的值替换locati

float和Float的区别

float是基本数据类型,Float是包装类(封装类).封装类可将接本数据类型封装后当作对象进行操作,并为各种基本数据类型提供各种转换功能.例如Float f = new Float(3.4f);,即可实现将3.4f这个float类型的基本数据类型变量封装,然后当作对象处理,进行诸如类型转换(转换为字符串或者十六进制数):也可通过Float类中的静态方法或者非静态方法将字符串转换为基本数据类型,例如float f = Float.parseFloat("12.3");. double和

CSS px, em, 和rem; float以及clear(第一篇学习)

px:相对长度,相对于屏幕分辨率: em:相对长度单位,相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸.  任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=16px.那么12px=0.75em,10px=0.625em.为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样 12px=1.2em, 10px=1em

我的Android进阶之旅------&gt;Java字符串格式化方法String.format()格式化float型时小数点变成逗号问题

今天接到一个波兰的客户说有个APP在英文状态下一切运行正常,但是当系统语言切换到波兰语言的时候,程序奔溃了.好吧,又是我来维护. 好吧,先把系统语言切换到波兰语,切换到波兰语的方法查看文章 我的Android进阶之旅------>Android[设置]-[语言和输入法]-[语言]列表中找到相应语言所对应的列表项 地址:http://blog.csdn.net/ouyang_peng/article/details/50209789 ================================

关于css中浮动float的最好理解!

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <div style="border:3px solid silver; width:300px;"> <div id="container" style=&

清除浮动float那点事儿

抛弃那些没用的方法,只记住最实用的一种方法即可! 给要清除浮动的父元素多加一个class属性:clearfix!!! 样式如下: .clearfix:after{     content:".";             display:block;             height:0;             clear:both;             visibility:hidden; } 为了兼容ie6,ie7(现在的项目几乎已经完全不考虑) .clearfix{ z

css基础篇(三)——布局(上)float和position

1.定位(position) position的值有:relative/absolute/fixed/static/inherit; static:为position属性的默认值,static元素会遵循正常的文档流,且会忽略top,bottom,left,right等属性; inherit:如同其他css的inherit值,即继承父元素的position值(ie不支持) 下面重点介绍前三个值: 1.1 相对定位(relative) 场景描述(如上图):第二个div的位置相对自己向下向右移动30p