CSS 小结笔记之清除浮动
生活随笔
收集整理的這篇文章主要介紹了
CSS 小结笔记之清除浮动
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
浮動是一個非常好用的屬性，但是有時會出現一些問題，需要進行清除浮動。例如
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.fa {background-color: red;width: 600px;/* height: 600px; */}.son1 {width: 200px;height: 200px;background-color: aqua;float: left;}.son2 {width: 300px;height: 200px;background-color: pink;float: left;}.div2 {width: 700px;height: 100px;background-color: orange;}</style> </head><body><div class="fa">aaa<div class="son1"></div><div class="son2"></div></div><div class="div2"></div> </body></html> View Code在父盒子沒有給出高度的情況下，子盒子浮動不會將父盒子撐開來。
清除浮動使用clear:left|right|both?一般使用clear：both，具體方法如下：
1、在浮動標簽后邊添加一個額外的clear標簽例如<div style="clear:both"></div>這樣做的方法 例如 <body><div class="fa">aaa<div class="son1"></div><div class="son2"></div><div style="clear:both"></div></div><div class="div2"></div> </body> View Code結果如下，這種方法簡單明了，但是會增加額外的標簽
2、父級添加overflow:hidden|auto|scroll? 在.fa 的css屬性中增加overflow:hidden ，結果也如上圖所示，例如 .fa {background-color: red;width: 600px;overflow: hidden;} 這種方法方便快捷，但是元素內容多時易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素3、使用after偽元素進行清除浮動
.clearfix:after {content: ".";/* 最好給content制定一個值防止舊版瀏覽器有空隙 */display: block;height: 0;visibility: hidden;clear: both;}.clearfix {*zoom: 1;/* 星號代表是ie6、ie7能識別的特殊符號zoom 是ie6、ie7清除浮動的方法*/}這樣給父盒子增加一個clearfix? 類即可實現1中的圖片效果。
4、同時使用after和before清除浮動 .clearfix:before,.clearfix:after {content: "";display: table;}.clearfix:after {clear: both;}.clearfix {*zoom: 1;}用法和方法三一樣，給父元素增加clearfix 類即可
第3、4種方法都是目前常用的方法，不增加多余標簽，但是ie6和ie7不支持after，需要使用zoom：1來清除浮動
?
?
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
以上是生活随笔為你收集整理的CSS 小结笔记之清除浮动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML 页面自动刷新
- 下一篇： webpack编译时No PostCSS