2. 程式人生 > 其它 >CSS深入理解學習筆記之float

CSS深入理解學習筆記之float

阿新 • • 發佈：2022-05-03

1、float的歷史

　　float設計的初衷僅僅是為了文字環繞效果。

　　示例程式碼：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>浮動的原本作用-文字環繞</title>
 6 <style>
 7 .test-box { width: 600px; margin: 16px auto; line-height: 1.5; font-size: 14px; }
 8 .float-left { float: left; margin: 0 10px 5px 0; }
 9 </style>
10 </head>
11 
12 <body>
13 <div class="test-box">
14     <img src="http://img.mukewang.com/53d60af3000171a002560191.jpg" class="float-left"/>
15     <p>一直有這麼一個美麗的誤會，說我是張含韻的忠實粉絲，因為左邊這種張含韻蘿莉時候的照片頻繁出現在我的文章中。</p>
16     <p>實際上，當年，我還在念大學那會兒，我就把我收藏的一些美女照片調成成固定的幾個比例，專門用來做演示使用。</p>
17     <p>分別是128畫素，256畫素，512畫素和原圖。然後，非常巧合的是，這些示例圖片中序號為1的妹子，就是張含韻。因此，只要有圖片演示，無論是使用了1張還是10張，張含韻小妹妹自然都會出現。久而久之，大家都認為我是張含韻的忠實粉絲。</p>
18     <p>然而，事實是什麼呢？</p>
19     <p>事實是，尼瑪我以前還真的是張含韻的忠實粉絲，上大學那會兒，唯一關注的新浪名博就是張含韻的部落格。不過現在嘛，普通粉絲，普通粉絲。</p>
20 </div>
21 </body>
22 </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策略：

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

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

5、float的濫用

　　float的特性：①元素block塊狀化（磚頭化）；②破壞性造成的緊密排列特性（去空格化）。

6、float與流體佈局

　　（1）單側固定流體佈局

　　　　width+float

　　　　margin-left/padding-left

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>浮動與單側尺寸固定的流體佈局</title>
 6 <style>
 7 
 8 body { font-size: 14px; background-color: #DDF3F7; color: #333; }
 9 a { color: #0082CB; text-decoration: none; }
10 p { margin: 0; } img { border: 0; }
11 
12 .mib_body { width: 600px; margin-left: auto; margin-right: auto; -webkit-transition: width .35s; transition: width .35s; }
13 .mib_x { margin-bottom: 10px; background-color: #fff; }
14 .mib_list { padding: 20px; overflow: hidden; _zoom: 1; }
15 .mib_vip { display: inline-block; width: 11px; height: 10px; margin-left: 1px; background: url(data:image/gif;base64,R0lGODlhCwAKAJEDAPyZCveDBuJmBP///yH5BAEAAAMALAAAAAALAAoAAAIdhD1zopgTXgMpsBdylVCPK2UCKI0j95hoRa0NVwAAOw==); }
16 
17 .mib_head_a { width: 56px; float: left; }   
18 /* 下面這個是固定佈局寫法 */
19 .mib_feed_fixed { width: 484px; float: right; }
20 /* 下面這個是流體佈局寫法 */
21 .mib_feed_flow { margin-left: 76px; }
22 
23 .mib_sms { line-height: 22px; padding-bottom: 6px; font-size: 14px; }
24 .mib_input { width: 70px; padding: 4px; font-size: 100%; }
25 .mib_btn { width: 70px; padding: 5px; font-size: 100%; }
26 
27 </style>
28 </head>
29 
30 <body>
31 <div id="mibBody" class="mib_body">
32     <div class="mib_x">
33         <div class="mib_list">
34             <a href="http://t.sina.com.cn/xuruoxuan" class="mib_head_a">
35                 <img title="徐若瑄VIVIAN" src="http://img.mukewang.com/53e2e9470001dfd200500050.jpg">
36             </a>
37             <div class="mib_feed_fixed">
38                 <p class="mib_sms"><a title="徐若瑄VIVIAN" href="#">徐若瑄VIVIAN<i title="新浪認證" class="mib_vip"></i></a>：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~~~~~~~~~~~~~~~~~~</p>
39                 <div class="feed_img"><img src="http://img.mukewang.com/53e2e9b10001948000890120.jpg" height="120"></div>
40             </div>    
41         </div>
42     </div>
43     <div class="mib_x">
44         <div class="mib_list">
45             <a href="http://t.sina.com.cn/xuruoxuan" class="mib_head_a">
46                 <img title="徐若瑄VIVIAN" src="http://img.mukewang.com/53e2e9470001dfd200500050.jpg">
47             </a>
48             <div class="mib_feed_flow">
49                 <p class="mib_sms"><a title="徐若瑄VIVIAN" href="#">徐若瑄VIVIAN<i title="新浪認證" class="mib_vip"></i></a>：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~~~~~~~~~~~~~~~~~~</p>
50                 <div class="feed_img"><img src="http://img.mukewang.com/53e2e9b10001948000890120.jpg" height="120"></div>
51             </div>    
52         </div>
53     </div>
54     
55     <div class="mib_x">
56         <div class="mib_list">
57             <p class="mib_sms">
58                 修改外框的寬度：<input type="number" id="mibInput" step="100" class="mib_input" value="600"> 畫素
59             </p>
60             <button type="button" id="mibBtn" class="mib_btn">確定</button>
61         </div>
62     </div>
63 </div>
64 <script>
65 var ele_mibBody = document.getElementById("mibBody"),
66     ele_mibInput = document.getElementById("mibInput"),
67     ele_mibBtn = document.getElementById("mibBtn");
68 
69 if ( ele_mibBody && ele_mibInput && ele_mibBtn ) {
70     ele_mibBtn.onclick = function() {
71         var value = ele_mibInput.value;
72         if (!/^d+$/.test(value)) {
73             value = 600;
74             ele_mibInput.value = value;
75         }
76         // 改變最外面容器的尺寸
77         ele_mibBody.style.width = value + "px";
78     };
79     
80     if (ele_mibInput.type == "number") {
81         ele_mibInput.onchange = function() {
82             ele_mibBtn.click();
83         };
84     }
85 }
86 </script>
87 </body>
88 </html>

　　（2）DOM與顯示位置匹配的單側固定佈局

　　　　width:100%+float

　　　　　　padding-left/margin-left

　　　　width+float+margin負值

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>浮動與右側尺寸固定的流體佈局</title>
 6 <style>
 7 
 8 body { font-size: 14px; background-color: #DDF3F7; color: #333; }
 9 a { color: #0082CB; text-decoration: none; }
10 p { margin: 0; } img { border: 0; }
11 
12 .mib_body { width: 600px; margin-left: auto; margin-right: auto; }
13 .mib_x { margin-bottom: 10px; background-color: #fff; }
14 .mib_list { padding: 20px; overflow: hidden; _zoom: 1; resize: none; }
15 .mib_resize { overflow: auto; resize: both; }
16 .mib_vip { display: inline-block; width: 11px; height: 10px; margin-left: 1px; background: url(data:image/gif;base64,R0lGODlhCwAKAJEDAPyZCveDBuJmBP///yH5BAEAAAMALAAAAAALAAoAAAIdhD1zopgTXgMpsBdylVCPK2UCKI0j95hoRa0NVwAAOw==); }
17 
18 /* 下面這個是右浮動，改變DOM位置的流體佈局寫法 */
19 .mib_head_r { width: 56px; float: right; }
20 .mib_feed_flow { margin-right: 76px; }
21 /* 下面這個是左浮動，不改變DOM位置的流體佈局寫法 */
22 .mib_full_float { width: 100%; float: left; }
23 .mib_head_l { width: 56px; float: left; margin-left: -56px;}
24 
25 .mib_sms { line-height: 22px; padding-bottom: 6px; font-size: 14px; }
26 .mib_input { width: 70px; padding: 4px; font-size: 100%; }
27 .mib_btn { width: 70px; padding: 5px; font-size: 100%; }
28 </style>
29 </head>
30 
31 <body>
32 <div id="mibBody" class="mib_body">
33     <div class="mib_x mib_resize">
34         <div class="mib_list">
35             <a href="http://t.sina.com.cn/xuruoxuan" class="mib_head_r">
36                 <img title="徐若瑄VIVIAN" src="http://img.mukewang.com/53e2e9470001dfd200500050.jpg">
37             </a>
38             <div class="mib_feed_flow">
39                 <p class="mib_sms"><a title="徐若瑄VIVIAN" href="#">徐若瑄VIVIAN<i title="新浪認證" class="mib_vip"></i></a>：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~~~~~~~~~~~~~~~~~~</p>
40                 <div class="feed_img"><img src="http://img.mukewang.com/53e2e9b10001948000890120.jpg" height="120"></div>
41             </div>    
42         </div>
43     </div>
44     <div class="mib_x mib_resize">
45         <div class="mib_list">
46             <div class="mib_full_float">
47                 <div class="mib_feed_flow">
48                     <p class="mib_sms"><a title="徐若瑄VIVIAN" href="#">徐若瑄VIVIAN<i title="新浪認證" class="mib_vip"></i></a>：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~~~~~~~~~~~~~~~~~~</p>
49                     <div class="feed_img"><img src="http://img.mukewang.com/53e2e9b10001948000890120.jpg" height="120"></div>
50                 </div>
51             </div>
52             <a href="http://t.sina.com.cn/xuruoxuan" class="mib_head_l">
53                 <img title="徐若瑄VIVIAN" src="http://img.mukewang.com/53e2e9470001dfd200500050.jpg">
54             </a>    
55         </div>
56     </div>
57 </div>
58 </body>
59 </html>

　　（3）智慧自適應尺寸

　　　　float

　　　　display:table-cell IE8+

　　　　display:inline-block IE7

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>浮動與兩側皆自適應的流體佈局</title>
 6 <style>
 7 
 8 body { font-size: 14px; background-color: #DDF3F7; color: #333; }
 9 a { color: #0082CB; text-decoration: none; }
10 p { margin: 0; } img { border: 0; }
11 
12 .mib_body { width: 600px; margin-left: auto; margin-right: auto; }
13 .mib_x { margin-bottom: 10px; background-color: #fff; }
14 .mib_list { padding: 20px; }
15 .mib_resize { overflow: auto; resize: both; }
16 .mib_vip { display: inline-block; width: 11px; height: 10px; margin-left: 1px; background: url(data:image/gif;base64,R0lGODlhCwAKAJEDAPyZCveDBuJmBP///yH5BAEAAAMALAAAAAALAAoAAAIdhD1zopgTXgMpsBdylVCPK2UCKI0j95hoRa0NVwAAOw==); }
17 
18 .mib_head_a { float: left; margin-right: 20px; }
19 /* 下面這個是固定佈局寫法 */
20 .mib_cell { display: table-cell; *display: inline-block; width: 2000px; *width: auto; }
21 
22 .mib_sms { line-height: 22px; padding-bottom: 6px; font-size: 14px; }
23 .mib_select { width: 80px; padding: 5px; font-size: 100%; }
24 </style>
25 </head>
26 
27 <body>
28 <div id="mibBody" class="mib_body">
29     <div class="mib_x mib_resize">
30         <div class="mib_list">
31             <a href="http://t.sina.com.cn/xuruoxuan" class="mib_head_a">
32                 <img id="mibHeadImg" title="徐若瑄VIVIAN" src="http://img.mukewang.com/53e2e9470001dfd200500050.jpg">
33             </a>
34             <div class="mib_cell">
35                 <p class="mib_sms"><a title="徐若瑄VIVIAN" href="#">徐若瑄VIVIAN<i title="新浪認證" class="mib_vip"></i></a>：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~~~~~~~~~~~~~~~~~~</p>
36                 <div class="feed_img"><img src="http://img.mukewang.com/53e2e9b10001948000890120.jpg" height="120"></div>
37             </div>    
38         </div>
39     </div>
40     <div class="mib_x">
41         <div class="mib_list">
42             <p class="mib_sms">
43                 選擇頭像的寬度：<select id="minSelect" class="mib_select">
44                     <option value="56px">56px</option>
45                     <option value="70px">70px</option>
46                     <option value="84px">84px</option>
47                     <option value="100px">100px</option>
48                 </select>
49             </p>
50         </div>
51     </div>
52 </div>
53 <script>
54 var ele_mibSelect = document.getElementById("minSelect"),
55     ele_mibHeadImg = document.getElementById("mibHeadImg");
56     
57 if (ele_mibSelect && ele_mibHeadImg) {
58     ele_mibSelect.onchange = function() {
59         ele_mibHeadImg.style.width = this.value;
60     };
61 }
62 </script>
63 </body>
64 </html>

 7、float與相容性

　　IE7的相容問題：

　　　　①含clear的浮動元素包裹不正確的問題；

　　　　　IE8：

　　　　　IE7：

　　　　②浮動元素倒數兩個莫名垂直間距問題；

　　　　　IE8：

　　　　　IE7：

　　　　③浮動元素最後一個字元重複問題；

　　　　　IE8：

　　　　　IE7：

　　　　④浮動元素樓梯排列問題；

　　　　　IE8：

　　　　　IE7：

⑤浮動元素和文字不在同一行的問題。

　　　　　IE8：

　　　　　IE7：

　　　　注：解決方案就是謹慎使用。

相關推薦

CSS深入理解學習筆記之float

1、float的歷史 　　float設計的初衷僅僅是為了文字環繞效果。 　　示例程式碼：

CSS深入理解學習筆記之absolute

1、absolute和float 　　擁有相同的特性表現： 　　　　①包裹性（容器應用之後，可以包裹裡面的內容）；

CSS深入理解學習筆記之overflow

1、Overflow基本屬性 　　overflow:visible(預設)/hidden/scroll/auto/inherit; 　　visible：超出部分可見。

vue學習筆記之Vue中css動畫原理簡單示例

本文例項講述了Vue中css動畫原理。分享給大家供大家參考，具體如下： 當transition包裹了一個元素之後，vue會自動分析元素的css樣式，構建動畫流程。

基於SpringBoot分層2開發web應用學習筆記之控制器的理解以及常見註解

在SpringMVC中，控制器負責處理由DIspatchServlet接收並分發過來的請求。它把使用者請求的資料通過業務處理層封裝成一個Model，然後把該model返回給對應的View進行展示。

go 學習筆記之有意思的變數和不安分的常量

首先希望學習 Go 語言的愛好者至少擁有其他語言的程式設計經驗,如果是完全零基礎的小白使用者,本教程可能並不適合閱讀或嘗試閱讀看看,系列筆記的目標是站在其他語言的角度學習新的語言,理解 Go 語言,進而寫出真正的

go 學習筆記之go是不是面嚮物件語言是否支援面對物件程式設計?

面向物件程式設計風格深受廣大開發者喜歡,尤其是以 C++,Java 為典型代表的程式語言大行其道,十分流行!

go 學習筆記之是否支援以及如何實現繼承

熟悉面向物件的小夥伴們可能會知道封裝,繼承和多型是最主要的特性,為什麼前輩們會如此看重這三種特性,真的那麼重要嗎?

go 學習筆記之萬萬沒想到寵物店竟然催生出面向介面程式設計?

到底是要貓還是要狗 在上篇文章中,我們編撰了一則簡短的小故事用於講解了什麼是面向物件的繼承特性以及 Go 語言是如何實現這種繼承語義的,這一節我們將繼續探討新的場景,希望能順便講解面向物件的介面概念.

Android動畫學習筆記之補間動畫

本文例項為大家分享了Android補間動畫展示的具體程式碼，供大家參考，具體內容如下

深入理解java1.8之supplier

supplier也是是用來建立物件的，但是不同於傳統的建立物件語法：new，看下面程式碼：

mongodb資料庫入門學習筆記之下載、安裝、啟動、連線操作解析

本文例項講述了mongodb資料庫下載、安裝、啟動、連線操作。分享給大家供大家參考，具體如下：

Python學習筆記之函式的引數和返回值的使用

01、函式引數和返回值的作用 函式根據 有沒有引數 以及 有沒有返回值，可以相互結合，共有四種：

Python樹莓派學習筆記之UDP傳輸視訊幀操作詳解

本文例項講述了Python樹莓派學習筆記之UDP傳輸視訊幀操作。分享給大家供大家參考，具體如下：

ES6學習筆記之let與const用法例項分析

本文例項講述了ES6學習筆記之let與const用法。分享給大家供大家參考，具體如下：

ES6學習筆記之字串、陣列、物件、函式新增知識點例項分析

本文例項講述了ES6學習筆記之字串、陣列、物件、函式新增知識點。分享給大家供大家參考，具體如下：

ES6學習筆記之新增資料型別例項解析

本文例項講述了ES6學習筆記之新增資料型別。分享給大家供大家參考，具體如下：

laravel框架學習筆記之元件化開發實現方法

本文例項講述了laravel框架學習筆記之元件化開發實現方法。分享給大家供大家參考，具體如下：

vue學習筆記之slot插槽基本用法例項分析

本文例項講述了vue學習筆記之slot插槽基本用法。分享給大家供大家參考，具體如下：

vue學習筆記之過濾器的基本使用方法例項分析

本文例項講述了vue學習筆記之過濾器的基本使用方法。分享給大家供大家參考，具體如下：