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>'); //
扫一扫
9192
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
