## 前言
css中的浮動向來是前端入門必備的知識點,也是在面試中都會提及的點,有些人也可以用簡單的overflow:hidden來解決浮動帶來的顯示問題。但作為一名優秀的前端,必須對浮動做到知根知底。
## 浮動的概念
通常為了使塊級元素能夠水平排列,我們會將需要這樣顯示的元素設置浮動來實現需要的效果。常用的浮動有左浮動,右浮動,以及none.對應的css 屬性為:float:left;right;none.
## 注意事項
1. 使用浮動的元素必須為塊級元素,對于行級元素以及行內塊級設置浮動是沒有意義的,因為行級和行內塊級本來就是水平排列
注意浮動的順序,如果按照左浮動,會按照文檔的代碼順序從左到右顯示,如果為右浮動,會從右到左,按照自己的設計稿效果,選擇正確的浮動方式
1. 使用浮動的塊級元素必須設置正確的寬高,如果不設置,塊級元素默認為父元素的寬度,即使設置了浮動,視覺效果也是不浮動的。設置正確的寬高后,當同一行放不下最后一個元素時,會放到下一行繼續水平排列
設置浮動后,會脫離標準的文檔流,需要在浮動結束之后,清除浮動
## 引發問題
1. 父元素盒子模型得不到正確的寬高,導致邊框、內邊距錯誤
2. 父元素盒模型不正確導致的相關顯示屬性,如父元素的背景,根據父元素定位的元素
3. 父元素盒模型不正確導致的父元素之后的元素錯位
## 清除浮動
1. 浮動元素能確認高寬的情況下,對父元素的高寬進行設定
2. 設置父元素overflow:hidden或者auto
3. 設置父元素為浮動,也可以重新獲取高度
4. 設置父元素的偽元素來實現
5. 清除浮動全局樣式
``` css
.clearfloat:after {
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0
}
.clearfloat {
zoom: 1
}
```
6\. 父元素設置寬度之后,設置display:table
7\. 父元素末尾追加br標簽 ,內置clear:both
## 總結
綜上 ,清除浮動最簡單的方式是overflow:hidden(推薦),最官方的寫法是寫一個全局的清除浮動樣式(可能瀏覽器支持不好)
- 前端入門
- 前端入職須知
- 前端自我定位
- pc與手機頁面差別
- 前端書單
- 前端種子計劃
- 前端技術棧
- ps
- ps入門階段
- html
- html入門
- html代碼規范
- meta
- table
- iframe
- a標簽詳解
- image
- html代碼審查工具
- h5專題
- h5入門
- h5新增屬性
- canvas畫布教程
- audio/video
- Geolocation
- Websockets
- Web storage
- Communication
- Web Workers
- requestAnimationFrame
- css
- css入門必學
- css代碼規范
- 項目字體規范
- css基本位置布局
- css常見樣式命名規則
- css代碼優化建議
- css常用樣式名
- css選擇器攻略
- css盒子模型的理解
- css屬性繼承與默認值
- css代碼審查工具
- css中常見的知識盲區
- css3新特性淺談
- css新特性了解
- border-radius
- background
- transform
- animation
- white-space
- css常用技術
- 文本兩端對齊
- css之浮動解決方案
- css優化建議
- 文本超出省略
- img-sprites
- rem布局教程
- 水平居中&垂直居中
- 固寬&變寬布局
- 寬高固定比例的盒模型
- 樣式預處理語言
- less教程
- sass教程
- postcss教程
- js
- javascript入門
- js代碼規范
- js基礎拓展
- js代碼審查工具
- js性能優化
- js基本語句
- 基本運算
- 基本語句語法
- js對象
- es6入門
- obj
- Array
- Date
- String
- Boolean
- Number
- Json
- RegExp
- Math
- function
- jquery入門
- jq核心思想
- jq基本語法
- jq插件庫匯總
- js常用技術
- break&continue區別
- js對日期轉換
- js控制運動-move.js
- 原生js-cookie語法
- ajax請求后回調
- 表單數據序列化
- zepto
- zepto入門
- 百度touchjs
- js編程
- 插件庫
- 功能性插件
- pdfjs
- wdatepicker
- qrcoder
- barcode插件
- photoviewer
- hammer.js
- echarts
- 交互組件
- layerjs
- java
- java入門
- java基本語句
- springMVC
- javaweb
- vm模板引擎
- freemarker
- maven教程
- mySql教程
- flex教程
- flex入門
- git教程
- git入門
- git分支
- git-tag管理
- git注意事項
- git-torise入門
- ide-git插件使用
- web
- web兼容
- web兼容思想
- pc端兼容適配文檔
- pc端兼容bug匯總
- ie兼容bug匯總
- 手機兼容bug匯總
- web安全
- jeecms
- web存儲
- app/h5組件
- 安卓教程
- ios教程
- 前端教程
- rubikx的教程
- 其他
- artTemplate
- tmod使用
- 跨域問題
- markdown教程
- 常用工具
- postman-api調試
- web常識
- 瀏覽器ua統計
- ui框架
- easyui
- bootstrap
- 入門推薦
- weui
- sui-pc
- sui-mobile
- layerUi