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>
View Code
从上述代码运行效果图可知原先为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>
这个<div> 包含 float: left 和 clear: left. 与我们通常理解的表现一致，宽度就是文字内容的宽度。
</div>
<div>
这个同样是一个 <div>, 左浮动，同时含有 clear: left 的 <div>. 因为这一段的文字内容很长，所以，按照我们通常的理解，这个 <div> 占据的长度应该有整个 body 这么长。但是，在 Internet Explorer 7 下，事与愿违。 这个具有左浮动，同时含有 clear: left 的 <div> 仅仅占据了部分body的内容区域宽度。---- 我是占位置的文字，我是占位置的文字，我是占位置的文字，我是占位置的文字，我是占位置的文字，我是占位置的文字，我是占位置的文字……
</div>
<div>
这是第3个具有float: left 和 clear: left 的 <div> . 改变你浏览器的宽度。
</div>
</body>
</html>
View Code
实现效果图如下：
当我们改变窗口大小时，效果图如下
浮动元素倒数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>
View Code
也就是说当超过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>
View Code
在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>
View Code
出现如下所示效果图(是不是会很无语)
如何使用float不出现上述所述怪异现象
不用使用浮动去做一些堆砖头的布局，使用流体布局相关的方法就可以避免怪异问题，总之就是不要滥用浮动
时间： 2024-09-17 19:06:55