清除浮動帶來的額外影響
如果對于浮動不熟悉的同學,可以看看介紹float的文章。傳送門:CSS float
我們知道,在一個父元素內如果遇到某個浮動元素,此時父元素的高度會發(fā)生塌陷。針對父元素高度塌陷的問題,現在已經有了很多的解決方案。針對每一個方案,我們來進行深度的剖析。
添加空塊級元素
這種方法比較容易,但是要注意的是這個空元素必須是一個塊級元素,不能是行內元素或者是行內塊元素。缺點就是多了一些沒有意義的標簽。代碼如下。
//HTML <div class="content"> <div class="float"> </div> <div class="clearfix"></div> //用于清除浮動的元素必須是塊級元素 </div> //CSS .content { background:pink;
}
.clearfix { clear: both;
}
.float { width: 50px; height: 50px; float: left; background: tan;
}
之所以可以使用clear屬性清除浮動帶來的額外影響,還要回歸clear屬性的本質。
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動安全 [無線安全]玩轉無線電——不安全的藍牙鎖 2017-07-26
- 消息隊列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標分割】 2017-07-26
- 詞向量-LRWE模型-更好地識別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實現JSON轉Model - HandyJSON使用講解 2017-07-26
- 阿里移動安全 Android端惡意鎖屏勒索應用分析 2017-07-26
- 集合結合數據結構來看看(二) 2017-07-26
