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

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

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

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

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

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

BFC(block format context)块级格式化上下文

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

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

clear方式的具体实现?

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

BFC/hasLayout具体实现方式?

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

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

其实还有更好的方式

        .clearfix:after
{
content: '';
display: table;
clear: both;
} .clearfix
{
*zoom:;
}

滥用浮动

其实.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系列  写的也挺不错的

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

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

    阅读目录 float设计初衷就是为了实现文字环绕效果 如何解决浮动造成的父容器塌陷? 兼容各浏览器清除浮动的通用方式 滥用浮动 运用浮动的一些特性 浮动与布局 浮动与单侧固定布局 浮动与智能自适应的流 ...

  2. Texture2D.GetPixelBilinear(float u, float v)的使用,官方例子注释

    using UnityEngine; using System.Collections; public class TEST : MonoBehaviour { public Texture2D so ...

  3. block中出现此种报错: Incompatible block pointer types initializing 'float (^__strong)(float, float)' with an expression of type 'int (^)(float, float)'

    当block(代码块)的返回值是float时,应注意的地方:定义的返回值类型一定要与return的返回值类型一样 我们以两个数的四则运算来举例 在main.m文件中的四则运算中,我采用两种返回值类型( ...

  4. 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 ...

  5. float和Float的区别

    float是基本数据类型,Float是包装类(封装类).封装类可将接本数据类型封装后当作对象进行操作,并为各种基本数据类型提供各种转换功能.例如Float f = new Float(3.4f);,即 ...

  6. 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 ...

  7. Animator.SetFloat(string name,float value,float dampTime,float deltaTime)详解

    一般来说,我们用到的是这个API: animator.SetFloat("Speed",2.0f); 但是这个还有一个重载的方法,叫做: Animator.SetFloat(str ...

  8. c、c++中-int型以float或者float型以int输出问题

    1.将浮点型以整形的类型输出问题 用VC6.0,会把以整形输出形式的浮点数输出为0: 1 #include"stdio.h" 2 int main() 3 { 4 float x= ...

  9. 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为每个原始数据类型提供了封装类. 其中原始数据类型封 ...

随机推荐

  1. 课程上线 -“新手入门 : Windows Phone 8.1 开发”

    经过近1个月的准备和录制,“新手入门 : Windows Phone 8.1 开发”系列课程已经在Microsoft 虚拟学院上线,链接地址为:http://www.microsoftvirtuala ...

  2. JVM之PC寄存器(Program Counter Register)

    基本特性: 当前线程执行的字节码的行号指示器. Java虚拟机支持多个线程同时执行,每一个线程都有自己的pc寄存器. 任意时刻,一个线程都只会执行一个方法的代码,称为该线程的当前方法,对于非nativ ...

  3. MongoDB学习笔记~大叔框架实体更新支持N层嵌套~递归递归我爱你!

    回到目录 递归递归我爱你!只要你想做,就一定能成功! 从一到二,从二到三,它是容易的,也是没什么可搞的,或者说,它是一种流水线的方式,而从三到十,从十到百,它注定要有一个质的突破,否则,它会把你累死, ...

  4. 【hive】——metastore的三种模式

    Hive中metastore(元数据存储)的三种方式: 内嵌Derby方式 Local方式 Remote方式 [一].内嵌Derby方式 这个是Hive默认的启动模式,一般用于单元测试,这种存储方式有 ...

  5. js 输出数组最大值

    ,,,,]; ]; ; i < run.length; i++) { if (max<run[i]) { max=run[i]; }else{ max=max; } } alert(max ...

  6. Linux非root用户如何使用80端口启动程序

    默认情况下Linux的1024以下端口是只有root用户才有权限占用,我们的tomcat,apache,nginx等等程序如果想要用普通用户来占用80端口的话就会抛出java.net.BindExce ...

  7. 第13章 Java常用类

    1.自动装箱和自动拆箱 自动装箱:基本类型就自动的封装到与它相同类型的包装中:如: 创建一个对象时:Integer i = 100;本质上是编译器编译时为我们添加了:Integer i = new I ...

  8. SortedMap接口:进行排序操作。

    回顾:SortedSet是TreeSet的实现接口,此接口可以排序. SortedMap接口同样可以排序,是TreeMap的实现接口,父类. 定义如下: public class TreeMap< ...

  9. @RenderBody、@RenderSection、@RenderPage、Html.RenderPartial、Html.RenderAction的作用和区别

    1. RenderBody在Razor引擎中没有了“母版页”,取而代之的是叫做“布局”的页面(_Layout.cshtml)放在了共享视图文件夹中.在这个页面中,会看到标签里有这样一条语句:@Rend ...

  10. 一个五年 Android 开发者百度、阿里、聚美、映客的面试心经

    花絮 也许会有人感叹某些人的运气比较好,但是他们不曾知道对方吃过多少苦,受过多少委屈.某些时候就是需要我们用心去发现突破点,然后顺势而上,抓住机遇,那么你将会走向另外一条大道,成就另外一个全新的自我. ...