有的人在寫頁子的時(shí)候常常會(huì)碰見這樣的一個(gè)問題，就是有一個(gè)父級的div下面有子元素，子元素浮動(dòng)起來后，父元素的高度變成0，撐不起來父級了。

創(chuàng)新互聯(lián)是一家以網(wǎng)絡(luò)技術(shù)公司，為中小企業(yè)提供網(wǎng)站維護(hù)、網(wǎng)站制作、網(wǎng)站建設(shè)、網(wǎng)站備案、服務(wù)器租用、域名與空間、軟件開發(fā)、微信小程序等企業(yè)互聯(lián)網(wǎng)相關(guān)業(yè)務(wù)，是一家有著豐富的互聯(lián)網(wǎng)運(yùn)營推廣經(jīng)驗(yàn)的科技公司，有著多年的網(wǎng)站建站經(jīng)驗(yàn)，致力于幫助中小企業(yè)在互聯(lián)網(wǎng)讓打出自已的品牌和口碑，讓企業(yè)在互聯(lián)網(wǎng)上打開一個(gè)面向全國乃至全球的業(yè)務(wù)窗口：建站歡迎聯(lián)系：028-86922220

現(xiàn)在先不說解決辦法，先說下float屬性，float定義：float 屬性定義元素在哪個(gè)方向浮動(dòng)。以往這個(gè)屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級框，而不論它本身是何種元素。（摘自：w3c）。

 從定義看出，其實(shí)float屬性一開始是被應(yīng)用與圖片，來形成文字環(huán)繞效果的，任何的元素只要定義了float屬相，就自動(dòng)的變成一個(gè)塊級元素，同時(shí)本身就擁有了寬、高等屬性。

 由于浮動(dòng)框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。摘自w3c。 從這句話中看出，其實(shí)定義了float屬性后，其自身是脫離普通文檔流的，所以父級就會(huì)變?yōu)?.

知道原因后，其實(shí)很容易找到解決辦法了，那就是清除浮動(dòng)，或者讓其父元素跟著浮動(dòng)，還有一種辦法就是其父元素屬性加上 overflow:hidden,下面說下為什么加上這個(gè)屬性就會(huì)解決這個(gè)問題。

這個(gè)屬性的定義：overflow 屬性規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情。摘自w3c。 看其字面意思，其實(shí)就是在他內(nèi)容超出后所作的措施，那為什么父級加上這個(gè)屬性后，浮動(dòng)就會(huì)關(guān)閉。overflow:hidden屬性相當(dāng)于是讓父級緊貼內(nèi)容，這樣即可緊貼其對象內(nèi)內(nèi)容（包括使用float的div盒子），從而實(shí)現(xiàn)了清除浮動(dòng)；

 overflow有4個(gè)值：

   visible 元素的內(nèi)容在元素框之外也可見，內(nèi)容超出元素框時(shí)不會(huì)改變元素框的形狀。

   scroll 元素的內(nèi)容會(huì)在元素框的邊界處裁剪，溢出的內(nèi)容將看不見，但是瀏覽器會(huì)使用一個(gè)滾動(dòng)條（或類似的東西）來訪問溢出的內(nèi)容，不會(huì)改變元素本身的形狀。

   hidden 元素的內(nèi)容會(huì)在元素框的邊界處裁剪，不過不會(huì)提供滾動(dòng)接口使用戶訪問溢出的內(nèi)容，也就是說被裁剪的內(nèi)容對用戶來說不可用。

   auto 由瀏覽器自動(dòng)判斷采用何種行為，不過都建議在必要時(shí)提供一個(gè)滾動(dòng)機(jī)制。

    overflow:hidden可以清楚浮動(dòng)，overflow:scroll清除浮動(dòng)時(shí)會(huì)產(chǎn)生滾動(dòng)條，overflow:auto清除浮動(dòng)

 

另外，如果一個(gè)絕對定位元素的內(nèi)容溢出了其內(nèi)容框，而且overflow設(shè)置為要求裁該內(nèi)容，可以通過使用屬性clip來設(shè)置裁剪區(qū)域的形狀。

創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國云服務(wù)器，動(dòng)態(tài)BGP最優(yōu)骨干路由自動(dòng)選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證， 機(jī)房獨(dú)有T級流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進(jìn)行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動(dòng)現(xiàn)已開啟，新人活動(dòng)云服務(wù)器買多久送多久。

文章題目：子元素浮動(dòng)，父元素高度為0現(xiàn)象解釋和原理淺見-創(chuàng)新互聯(lián)
網(wǎng)頁路徑：http://chinadenli.net/article38/ehpsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、虛擬主機(jī)、網(wǎng)站導(dǎo)航、網(wǎng)頁設(shè)計(jì)公司、手機(jī)網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)