CSS深入理解学习笔记之float

1、float的历史

　　float设计的初衷仅仅是为了文字环绕效果。

　　示例代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>浮动的原本作用-文字环绕</title>

 <style>

 .test-box { width: 600px; margin: 16px auto; line-height: 1.5; font-size: 14px; }

 .float-left { float: left; margin: 0 10px 5px 0; }

 </style>

 </head>

 <body>

 <div class="test-box">

     <img src="http://img.mukewang.com/53d60af3000171a002560191.jpg" class="float-left"/>

     <p>一直有这么一个美丽的误会，说我是张含韵的忠实粉丝，因为左边这种张含韵萝莉时候的照片频繁出现在我的文章中。</p>

     <p>实际上，当年，我还在念大学那会儿，我就把我收藏的一些美女照片调成成固定的几个比例，专门用来做演示使用。</p>

     <p>分别是128像素，256像素，512像素和原图。然后，非常巧合的是，这些示例图片中序号为1的妹子，就是张含韵。因此，只要有图片演示，无论是使用了1张还是10张，张含韵小妹妹自然都会出现。久而久之，大家都认为我是张含韵的忠实粉丝。</p>

     <p>然而，事实是什么呢？</p>

     <p>事实是，尼玛我以前还真的是张含韵的忠实粉丝，上大学那会儿，唯一关注的新浪名博就是张含韵的博客。不过现在嘛，普通粉丝，普通粉丝。</p>

 </div>

 </body>

 </html>

　　效果图：

2、Float的特性-包裹与破坏

　　包裹特性：

　　同时具有相同特性的有：

display:inline-block/table-cell/...
position:absolute/fixed/sticky
overflow:hidden/scroll

　　破坏性：

　　同时具有相同特性的有：

display:none
position:absolute/fixed/sticky

3、被误解的float浮动

　　float的破坏特性，是为了文字环绕效果而服务的。由于父元素的高度塌陷，使得文字可以跑上来环绕图片，如下图：

4、清除浮动

　　两大基本方法：①脚底插入clear:both；②父元素BFC（IE8+）或haslayout（IE6/IE7）。

　　clear通常应用形式：

　　　　①HTML block元素底部走起<div style="clear:both"></div>（缺点：空标签看上去不舒服）；

　　　　②CSS after伪元素底部生成（缺点：不兼容IE6/IE7）。

　　权衡后的clear策略：

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

 .clearfix{*zoom:;}

　　注：浮动一定要慎重使用。

5、float的滥用

　　float的特性：①元素block块状化（砖头化）；②破坏性造成的紧密排列特性（去空格化）。

6、float与流体布局

　　（1）单侧固定流体布局

　　　　width+float

　　　　margin-left/padding-left

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>浮动与单侧尺寸固定的流体布局</title>

 <style>

 body { font-size: 14px; background-color: #DDF3F7; color: #333; }

 a { color: #0082CB; text-decoration: none; }

 p { margin: 0; } img { border: 0; }

 .mib_body { width: 600px; margin-left: auto; margin-right: auto; -webkit-transition: width .35s; transition: width .35s; }

 .mib_x { margin-bottom: 10px; background-color: #fff; }

 .mib_list { padding: 20px; overflow: hidden; _zoom: 1; }

 .mib_vip { display: inline-block; width: 11px; height: 10px; margin-left: 1px; background: url(data:image/gif;base64,R0lGODlhCwAKAJEDAPyZCveDBuJmBP///yH5BAEAAAMALAAAAAALAAoAAAIdhD1zopgTXgMpsBdylVCPK2UCKI0j95hoRa0NVwAAOw==); }

 .mib_head_a { width: 56px; float: left; }

 /* 下面这个是固定布局写法 */

 .mib_feed_fixed { width: 484px; float: right; }

 /* 下面这个是流体布局写法 */

 .mib_feed_flow { margin-left: 76px; }

 .mib_sms { line-height: 22px; padding-bottom: 6px; font-size: 14px; }

 .mib_input { width: 70px; padding: 4px; font-size: 100%; }

 .mib_btn { width: 70px; padding: 5px; font-size: 100%; }

 </style>

 </head>

 <body>

 <div id="mibBody" class="mib_body">

     <div class="mib_x">

         <div class="mib_list">

             <a href="http://t.sina.com.cn/xuruoxuan" class="mib_head_a">

                 <img title="徐若瑄VIVIAN" src="http://img.mukewang.com/53e2e9470001dfd200500050.jpg">

             </a>

             <div class="mib_feed_fixed">

                 <p class="mib_sms"><a title="徐若瑄VIVIAN" href="#">徐若瑄VIVIAN<i title="新浪认证" class="mib_vip"></i></a>：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~~~~~~~~~~~~~~~~~~</p>

                 <div class="feed_img"><img src="http://img.mukewang.com/53e2e9b10001948000890120.jpg" height="120"></div>

             </div>

         </div>

     </div>

     <div class="mib_x">

         <div class="mib_list">

             <a href="http://t.sina.com.cn/xuruoxuan" class="mib_head_a">

                 <img title="徐若瑄VIVIAN" src="http://img.mukewang.com/53e2e9470001dfd200500050.jpg">

             </a>

             <div class="mib_feed_flow">

                 <p class="mib_sms"><a title="徐若瑄VIVIAN" href="#">徐若瑄VIVIAN<i title="新浪认证" class="mib_vip"></i></a>：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~~~~~~~~~~~~~~~~~~</p>

                 <div class="feed_img"><img src="http://img.mukewang.com/53e2e9b10001948000890120.jpg" height="120"></div>

             </div>

         </div>

     </div>

     <div class="mib_x">

         <div class="mib_list">

             <p class="mib_sms">

                 修改外框的宽度：<input type="number" id="mibInput" step="100" class="mib_input" value="600"> 像素

             </p>

             <button type="button" id="mibBtn" class="mib_btn">确定</button>

         </div>

     </div>

 </div>

 <script>

 var ele_mibBody = document.getElementById("mibBody"),

     ele_mibInput = document.getElementById("mibInput"),

     ele_mibBtn = document.getElementById("mibBtn");

 if ( ele_mibBody && ele_mibInput && ele_mibBtn ) {

     ele_mibBtn.onclick = function() {

         var value = ele_mibInput.value;

         if (!/^\d+$/.test(value)) {

             value = 600;

             ele_mibInput.value = value;

         }

         // 改变最外面容器的尺寸

         ele_mibBody.style.width = value + "px";

     };

     if (ele_mibInput.type == "number") {

         ele_mibInput.onchange = function() {

             ele_mibBtn.click();

         };

     }

 }

 </script>

 </body>

 </html>

　　（2）DOM与显示位置匹配的单侧固定布局

　　　　width:100%+float

　　　　　　padding-left/margin-left

　　　　width+float+margin负值

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>浮动与右侧尺寸固定的流体布局</title>

 <style>

 body { font-size: 14px; background-color: #DDF3F7; color: #333; }

 a { color: #0082CB; text-decoration: none; }

 p { margin: 0; } img { border: 0; }

 .mib_body { width: 600px; margin-left: auto; margin-right: auto; }

 .mib_x { margin-bottom: 10px; background-color: #fff; }

 .mib_list { padding: 20px; overflow: hidden; _zoom: 1; resize: none; }

 .mib_resize { overflow: auto; resize: both; }

 .mib_vip { display: inline-block; width: 11px; height: 10px; margin-left: 1px; background: url(data:image/gif;base64,R0lGODlhCwAKAJEDAPyZCveDBuJmBP///yH5BAEAAAMALAAAAAALAAoAAAIdhD1zopgTXgMpsBdylVCPK2UCKI0j95hoRa0NVwAAOw==); }

 /* 下面这个是右浮动，改变DOM位置的流体布局写法 */

 .mib_head_r { width: 56px; float: right; }

 .mib_feed_flow { margin-right: 76px; }

 /* 下面这个是左浮动，不改变DOM位置的流体布局写法 */

 .mib_full_float { width: 100%; float: left; }

 .mib_head_l { width: 56px; float: left; margin-left: -56px;}

 .mib_sms { line-height: 22px; padding-bottom: 6px; font-size: 14px; }

 .mib_input { width: 70px; padding: 4px; font-size: 100%; }

 .mib_btn { width: 70px; padding: 5px; font-size: 100%; }

 </style>

 </head>

 <body>

 <div id="mibBody" class="mib_body">

     <div class="mib_x mib_resize">

         <div class="mib_list">

             <a href="http://t.sina.com.cn/xuruoxuan" class="mib_head_r">

                 <img title="徐若瑄VIVIAN" src="http://img.mukewang.com/53e2e9470001dfd200500050.jpg">

             </a>

             <div class="mib_feed_flow">

                 <p class="mib_sms"><a title="徐若瑄VIVIAN" href="#">徐若瑄VIVIAN<i title="新浪认证" class="mib_vip"></i></a>：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~~~~~~~~~~~~~~~~~~</p>

                 <div class="feed_img"><img src="http://img.mukewang.com/53e2e9b10001948000890120.jpg" height="120"></div>

             </div>

         </div>

     </div>

     <div class="mib_x mib_resize">

         <div class="mib_list">

             <div class="mib_full_float">

                 <div class="mib_feed_flow">

                     <p class="mib_sms"><a title="徐若瑄VIVIAN" href="#">徐若瑄VIVIAN<i title="新浪认证" class="mib_vip"></i></a>：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~~~~~~~~~~~~~~~~~~</p>

                     <div class="feed_img"><img src="http://img.mukewang.com/53e2e9b10001948000890120.jpg" height="120"></div>

                 </div>

             </div>

             <a href="http://t.sina.com.cn/xuruoxuan" class="mib_head_l">

                 <img title="徐若瑄VIVIAN" src="http://img.mukewang.com/53e2e9470001dfd200500050.jpg">

             </a>

         </div>

     </div>

 </div>

 </body>

 </html>

　　（3）智能自适应尺寸

　　　　float

　　　　display:table-cell IE8+

　　　　display:inline-block IE7

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>浮动与两侧皆自适应的流体布局</title>

 <style>

 body { font-size: 14px; background-color: #DDF3F7; color: #333; }

 a { color: #0082CB; text-decoration: none; }

 p { margin: 0; } img { border: 0; }

 .mib_body { width: 600px; margin-left: auto; margin-right: auto; }

 .mib_x { margin-bottom: 10px; background-color: #fff; }

 .mib_list { padding: 20px; }

 .mib_resize { overflow: auto; resize: both; }

 .mib_vip { display: inline-block; width: 11px; height: 10px; margin-left: 1px; background: url(data:image/gif;base64,R0lGODlhCwAKAJEDAPyZCveDBuJmBP///yH5BAEAAAMALAAAAAALAAoAAAIdhD1zopgTXgMpsBdylVCPK2UCKI0j95hoRa0NVwAAOw==); }

 .mib_head_a { float: left; margin-right: 20px; }

 /* 下面这个是固定布局写法 */

 .mib_cell { display: table-cell; *display: inline-block; width: 2000px; *width: auto; }

 .mib_sms { line-height: 22px; padding-bottom: 6px; font-size: 14px; }

 .mib_select { width: 80px; padding: 5px; font-size: 100%; }

 </style>

 </head>

 <body>

 <div id="mibBody" class="mib_body">

     <div class="mib_x mib_resize">

         <div class="mib_list">

             <a href="http://t.sina.com.cn/xuruoxuan" class="mib_head_a">

                 <img id="mibHeadImg" title="徐若瑄VIVIAN" src="http://img.mukewang.com/53e2e9470001dfd200500050.jpg">

             </a>

             <div class="mib_cell">

                 <p class="mib_sms"><a title="徐若瑄VIVIAN" href="#">徐若瑄VIVIAN<i title="新浪认证" class="mib_vip"></i></a>：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~~~~~~~~~~~~~~~~~~</p>

                 <div class="feed_img"><img src="http://img.mukewang.com/53e2e9b10001948000890120.jpg" height="120"></div>

             </div>

         </div>

     </div>

     <div class="mib_x">

         <div class="mib_list">

             <p class="mib_sms">

                 选择头像的宽度：<select id="minSelect" class="mib_select">

                     <option value="56px">56px</option>

                     <option value="70px">70px</option>

                     <option value="84px">84px</option>

                     <option value="100px">100px</option>

                 </select>

             </p>

         </div>

     </div>

 </div>

 <script>

 var ele_mibSelect = document.getElementById("minSelect"),

     ele_mibHeadImg = document.getElementById("mibHeadImg");

 if (ele_mibSelect && ele_mibHeadImg) {

     ele_mibSelect.onchange = function() {

         ele_mibHeadImg.style.width = this.value;

     };

 }

 </script>

 </body>

 </html>

7、float与兼容性

　　IE7的兼容问题：

　　　　①含clear的浮动元素包裹不正确的问题；

　　　　　IE8：

　　　　　IE7：

　　　　②浮动元素倒数两个莫名垂直间距问题；

　　　　　IE8：

　　　　　IE7：

　　　　③浮动元素最后一个字符重复问题；

　　　　　IE8：

　　　　　IE7：

　　　　④浮动元素楼梯排列问题；

　　　　　IE8：

　　　　　IE7：

　　　　⑤浮动元素和文本不在同一行的问题。

　　　　　IE8：

　　　　　IE7：

　　　　注：解决方案就是谨慎使用。

CSS深入理解学习笔记之float的更多相关文章

CSS深入理解学习笔记之absolute
1.absolute和float 拥有相同的特性表现: ①包裹性(容器应用之后,可以包裹里面的内容): <!doctype html> <html> <head> ...
CSS深入理解学习笔记之margin
1.margin与容器尺寸元素尺寸:①可视尺寸 clientWidth(标准):②占据尺寸 margin与可视尺寸:①适用于没有设定width/height的普通block元素:②只适用于水平方向尺 ...
CSS深入理解学习笔记之vertical-align
1.vertical-align基本认识支持的属性值: ①线类:baseline(默认),top,middle,bottom ②文本类:text-top,text-bottom ③上标下标类:sub ...
CSS深入理解学习笔记之overflow
1.Overflow基本属性 overflow:visible(默认)/hidden/scroll/auto/inherit; visible:超出部分可见. hidden:超出部分隐藏. scrol ...
CSS深入理解学习笔记之line-height
1.line-height的定义定义:两行文字基线之间的距离. 注:不同字体之间的基线是不同的. 2.line-height与行内框盒子模型行内框盒子模型: ①内容区域(content area) ...
CSS深入理解学习笔记之relative
1.relative和absolute的相煎关系限制作用:①限制left/top/right/bottom定位:②限制z-index层级:③限制在overflow下的嚣张气焰. relative和f ...
CSS深入理解学习笔记之z-index
1.z-index基础 z-index含义:指定了元素及其子元素的"z顺序",而"z顺序"可以决定元素的覆盖顺序.z-index值越大越在上面. z-index ...
CSS深入理解学习笔记之padding
1.padding与容器尺寸之间的关系对于block水平元素:①padding值暴走,一定会影响尺寸:②width非auto,padding影响尺寸:③width为auto或box-sizing为b ...
CSS深入理解学习笔记之border
1.border-width border-width为何不支持百分比:语义和使用场景决定的,现实中各种边框本身的概念就不存在百分比的使用方法. border-width支持关键字:thin.medi ...

随机推荐

K：Union-Find（并查集）算法
相关介绍: 并查集的相关算法,是我见过的,最为之有趣的算法之一.并查集是一种树型的数据结构,用于处理一些不相交集合(Disjoint Sets)的合并及查询问题.其相关的实现代码较为简短,实现思想也 ...
[树莓派(raspberry pi)] 02、PI3安装openCV开发环境做图像识别（详细版）
前言上一篇我们讲了在linux环境下给树莓派安装系统及入门各种资料 ,今天我们更进一步,尝试在PI3上安装openCV开发环境. 博主在做的过程中主要参考一个国外小哥的文章(见最后链接1),不过其教 ...
BIOS 品牌快捷键
主板品牌启动按键笔记本品牌启动按键台式机品牌启动按键华硕主板 F8 联想笔记本 F12 联想台式机 F12 技嘉主板 F12 宏基笔记本 F12 惠普台式机 F12 微星主板 F11 华硕 ...
使用sysbench对mysql压力测试
sysbench是一个模块化的.跨平台.多线程基准测试工具,主要用于评估测试各种不同系统参数下的数据库负载情况.关于这个项目的详细介绍请看:https://github.com/akopytov/sy ...
[译]what is bootstrap
Question:Bootstrap的定义?有什么用?如何助力前端开发? Answers: 它是一个在用HTML,CSS和javascript创建网站和网页应用的时候可以用到的基础内容. More ...
c#快速写本地日志
很多人的程序在本地运行是好的,但是发布在服务器上后就会有各种各样的问题,但是服务器上又不能直接调试,所以直接读写本地日志成为解决问题的关键,我这个方法,会在发布网站的根目录自动创建 log.txt,并 ...
浅谈我的MongoDB学习（二）
上一篇简单讲了mongodb的安装,mongo的windows服务安装,这样服务器重启windows服务会自动重启mongodb的server,然后我们就可以用客户端去管理数据了.mongodb客户端 ...
RabbitMQ的应用场景以及基本原理介绍
1.背景 RabbitMQ是一个由erlang开发的AMQP(Advanved Message Queue)的开源实现. 2.应用场景 2.1异步处理场景说明:用户注册后,需要发注册邮件和注册短信, ...
zookeeper之分布式锁以及分布式计数器(通过curator框架实现)
有人可能会问zookeeper我知道,但是curator是什么呢? 其实curator是apachede针对zookeeper开发的一个api框架是apache的顶级项目他与zookeeper原生a ...
你不知道的JSON.stringify和JSON.parse
json是JavaScript 对象表示法(JavaScript Object Notation),是一种简单的数据格式,类似于XML,其格式为名称/值对,数据用逗号隔开,名称必须用双引号括起来.例如 ...

CSS深入理解学习笔记之float

CSS深入理解学习笔记之float的更多相关文章

随机推荐

热门专题