個人關於css中幾種取消浮動對於其他元素影響的見解
1、直接給父級元素新增高度
div可以直接定義width和height，且因為div為塊級元素會直接佔用其高度所在的行，無法並排存放第二個div。若該div不定義初始高度，則他的高度和寬度由該div中巢狀的元素大小決定，可能是文字元素或者是非文字元素。換一種說法也就是因為使用的是div且沒有脫離標準文件流，變會按照塊級元素方式進行排列。
而若此時子元素中定義了float:left;則該子元素便會脫離標準文件流，不在受到約束。那麼，這個時候如果父級元素沒有定義width和height時，該定義了浮動的元素就會對父級元素中的其他元素髮生干擾。
這種方式比較簡單可行，但是因為在實際的網頁設計中會有許多變動，父級元素的格式不是一成不變的，這種方式不容易優化，不推薦在大型工程中使用。
2、使用overflow:hidden
這種方式是目前使用最廣泛，也是最多的一種。在很多工程中都能見到這種清除浮動對其他元素影響的方式。看這個程式碼的後面是hidden，顧名思義就是隱藏的意思。那麼它到底是隱藏了什麼呢？按照術語來說，它是隱藏了溢位的元素。
而當父盒子定義了overflow:hidden; 後，父盒子就可以將溢位的部分直接隱藏只顯示在父盒子內部的部分，父盒子也能正確的確定寬高，就目前部落格主知識儲備，在網站輪播圖使用為比較典型的例子。也是比較完善的一種方式，沒有太大缺陷。
3、通過給父元素以及子元素均產生浮動來消除子元素的浮動對父元素內部其他元素的影響
可能有的人覺得這種方法很好，既不會影響子元素和父元素內部元素之間的排列，還能設定子盒子和父盒子的高度和寬的豈不兩全其美？但是這只是因為這裡只有兩個盒子。如果是3個元素依次巢狀的話，情況就會發生變化。
這是三個盒子巢狀的情況，三個div均沒有設定寬度和高度，最小的div高度由它的文字元素決定。以上的兩個div大小由它的子元素和自身的元素構成，接下來先給最小的div使用float:left;
此時，最小的盒子脫離了標準文件流，不再受到以上兩個標準文件流檔案的約束，接下來繼續給內部div使用float:left;
此時兩個脫離標準文件流的元素之間的巢狀生效，爸爸和兒子之間恢復了正常的排列方式，這兩個盒子成功消除了浮動的影響，但是爺爺的內部元素仍然受到了浮動的影響，繼續給爺爺使用浮動
此時雖然還是成功的完成了三個div的巢狀，但是排列方式已經發生了改變。所以，除非盒子比較少，不然這種清除浮動影響的方式慎用。
相關推薦
個人關於css中幾種取消浮動對於其他元素影響的見解
1、直接給父級元素新增高度 div可以直接定義width和height，且因為div為塊級元素會直接佔用其高度所在的行，無法並排存放第二個div。若該div不定義初始高度，則他的高度和寬度由該div中巢狀的元素大小決定，可能是文字元素或者是非文字元素。換一種說法也就是
java 中幾種常用數據結構
初學 ble log app 使用 blog list 好的 sort Java中有幾種常用的數據結構，主要分為Collection和map兩個主要接口（接口只提供方法，並不提供實現），而程序中最終使用的數據結構是繼承自這些接口的數據結構類。 一、幾個常用類的區別 1．
EntityFramework中幾種更改數據的方式
結構 tac pro partial 數據庫 修改表 tle 狀態 代碼 首先聲明個實體類，該實體類是EntityFrameWork自動生成的，對應數據表Test結構如下 public partial class Test { public i
人臉檢測中幾種框框大小的選擇~
gravity 經濟 自己 位置 之間 實現 track 之前 訓練樣本 人臉檢測應用極為廣泛，內部細節也偏多，尤其是涉及到幾種類型的框，這幾種框的大小之前有著千絲萬縷的聯系，對檢測性能的好壞影響程度大小不一。本篇文章基於自己在人臉檢測方面的經驗，說說對這些框之間關系的
js中幾種實用的跨域方法原理詳解
自身 標簽 cdc 返回 屬性和方法 插入 實用 封裝 判斷 這裏說的js跨域是指通過js在不同的域之間進行數據傳輸或通信，比如用ajax向一個不同的域請求數據，或者通過js獲取頁面中不同域的框架中(iframe)的數據。只要協議、域名、端口有任何一個不同， 都被當作是不同
C#中幾種常用的集合的用法
col div tex -c 組成 相同 列表 對象 count 集合:將一推數據類型相同的數據放入到一個容器內，該容器就是數組：內存中開辟的一連串空間。 非泛型集合 ArrayList集合： ArrayList是基於數組實現的，是一個動態數組，其容量能自動 增
Java中幾種常量池的區分
加載完成 表結構 結構 reference 嘗試 int 理解 方法區 spa 轉載自：https://tangxman.github.io/2015/07/27/the-difference-of-java-string-pool/ 在java的內存分配中，經常聽到很多關
js 自己項目中幾種打開或彈出頁面的方法
顯示 頁面 框架 方法 func open 地址 title 窗體 自己項目中，幾種打開或彈出頁面的方法（部分需要特定環境下） var blnTop = false;//是否在頂層顯示 ///動態生成模態窗體（通過字符串生成） ///strModalId:模態窗體ID
Android開發中幾種有用的的日歷控件實現
顯示 lec 外觀 翻頁 frame 時間 lean android平臺 星期 我們大家都知道，在Android平臺3.0中才新增了日歷視圖控件，可以顯示網格狀的日歷內容，那麽對於3.0以下的版本要使用日歷控件只能借助第三方，目前用的最多的是CalendarView。 先簡
個人遇到的幾種Date類型處理方式
strong 格式 取出 eat title 使用 成員 log ted 一、如何用JSTL標簽對jsp頁面中的Date類型進行格式化 1、引入標簽<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fm
js中幾種異常類型
jsNaN類型：#not a numberNumber只能轉化數字字符串，該方法轉化失敗時就會產生一個NaNstr=‘10abc‘;Number(str);null類型：空,經常使用str=‘‘來代替，一般用於提前規劃一些變量或給變量賦初值，以免報錯undefined類型：變量未定義例子：<script
JAVA中幾種常用的RPC框架介紹
github 不同的 target int https love num 分布 有一個 RPC是遠程過程調用的簡稱，廣泛應用在大規模分布式應用中，作用是有助於系統的垂直拆分，使系統更易拓展。Java中的RPC框架比較多，各有特色，廣泛使用的有RMI、Hessian、Du
Java 中幾種常用的線程池
需要 表示 ali adf data future rate 並發 ng- Java 中幾種常用的線程池 轉載 ： https://www.cnblogs.com/sachen/p/7401959.html 原創 2016年04月14日 23:29:01 標簽： j
SQL Server中幾種遍歷方式比較
不同 .com font size 常用 分享 分享圖片 遊標 inf SQL遍歷解析 在SQL的存儲過程，函數中，經常需要使用遍歷（遍歷table），其中遊標、臨時表等遍歷方法很常用。面對小數據量，這幾種遍歷方法均可行，但是面臨大數據量時，就需要擇優選擇，不同的遍歷方
C++中幾種測試程序運行時間的方法<轉>
begin html cnblogs bsp 可能 boost庫 www. rman 高精 轉的地址：https://www.cnblogs.com/silentteen/p/7532855.html 1.GetTickCount()函數 原理： GetTickCoun
昊天善圈講述區塊鏈技術應用開發過程中幾種常見的區塊鏈系統類型：
玩遊戲 通過 遊戲 返利 應用 自定義 理財 區塊鏈 區塊鏈寵物系統 1.區塊鏈挖礦系統：手手機挖礦遊戲，挖得多賺得多，玩法自定義2.區塊鏈積分商城：多種積分獲取方式，積分可用於商城交易3.區塊鏈貨幣系統：自行發行數字貨幣，多種獲取貨幣方式，數字貨幣交易商城，打造數字貨幣全
Thinkphp編程中幾種常見的實用技巧講解
要掌握 true 方法 ech admin 字段 status _id 同時 在Thinkphp編程中集成了很多用起來非常方便的方法。對於剛接觸的編程人員來說，可謂是只要掌握並靈活運用了，那麽就可以達到事半功倍的效果了，下面就來為大家詳細的講解一下。 1. getFie
HTML--高度塌陷（css）幾種小技巧
bsp rule -o ear style attr att 通用 浮動 解決辦法 1.在高度塌陷的父div裏面加一個div： <div id="a"> <div id="a1"> </div> <div id="a2">
Java中幾種常見的NPE問題
avi oar 返回 對象 [] 報錯 不能 alt public 1、Map下的NPE 直接上代碼： public class User { private Integer id; private String name;
javascript中幾種為false的值
var style 需要 head def viewport ont tle ole 如果JavaScript預期某個位置應該是布爾值，會將該位置上現有的值自動轉為布爾值。轉換規則是除了下面六個值被轉為false，其他值都視為true。 undefined null