1. 程式人生 > >overflow :hidden 和 clear:both 與 clearfix撐起高度坍塌的父元素應用

overflow :hidden 和 clear:both 與 clearfix撐起高度坍塌的父元素應用

overflow :hidden 和 clear:both防止父元素塌陷的應用

二者都可以應用於清除浮動,將包含有float元素的高度坍塌的父元素高度撐起來;

(1)overflow:hidden:

只要在父元素裡面設定:overflow :hidden 即可:

原理:

因為overflow屬性(除了應用visible),對於scroll hidden auto 都會對當中的 float ,position:absolute,inline-block等浮動元素塊級格式化,相當於塊元素,此時相比原來的浮動元素對於父元素高度坍塌問題就不存在了。

(2)both:clear

在父元素裡面設定一個與浮動元素同級的div子元素,然後設定

clear:both,

display: block;

visibility: none;
height: 1px;

原理:在float浮動元素下面存在的塊元素,兩邊不能有浮動元素,自然撐開了父元素的高度

(3)

新增clearfix類

.clearfix:after

{

visible:hidden;

display:block;

content: ". ";

clear:both;

font-size:0;

height:0;

}

//為ie6準備。

.clearfix{zoom: 1;}

相關推薦

overflow hidden clearboth clearfix高度坍塌元素應用

overflow :hidden 和 clear:both防止父元素塌陷的應用 二者都可以應用於清除浮動,將包含有float元素的高度坍塌的父元素高度撐起來; (1)overflow:hidden: 只要在父元素裡面設定:overflow :hidden 即可: 原理: 因

面試常考點httphttps的區別聯系

vps sock 選擇 請求 網站 國家 報文 體系 soc 超文本傳輸協議HTTP協議被用於在Web瀏覽器和網站服務器之間傳遞信息,HTTP協議以明文方式發送內容,不提供任何方式的數據加密,如果攻擊者截取了Web瀏覽器和網站服務器之間的傳輸報文,就可以直接讀懂其中的信息,

總結ArrayListLinkedList的分析區別

類 ArrayList< E > 【所屬包】:java.util 【父類結構】: java.lang.Objectjava.util.AbstractCollection java.util.AbstractList java.util.ArrayList 【原始碼展示】

面試常考點httphttps的區別聯絡

感謝原作者,本文轉載自http://www.mahaixiang.cn/internet/1233.html 超文字傳輸協議HTTP協議被用於在Web瀏覽器和網站伺服器之間傳遞資訊,HTTP協議以明文方式傳送內容,不提供任何方式的資料加密,如果攻擊者截取了Web瀏覽器和網站伺服器之間的傳輸報文,

面試題目1springspringmvc的區別聯系

details 簡介 對象 hand sdn ioc servlet 填充 model 一、spring框架的介紹 spring是一個一站式的框架,提供了表現層(springmvc)到業務層(spring)再到數據層(springdata)的全套解決方案;spr

MySQL資料同步,出現Slave_SQL_Runningnoslave_io_runningno問題的解決方法

一、問題描述: 當我們配置好MySQL主主同步時,是可以實現主主同步,但是重啟機器後就發現無法同步了。 二、Slave兩個關鍵程序: mysql replication 中slave機器上有兩個關鍵的程序,死一個都不行,一個是slave_sql_running,一個是Slave_IO_Running,一

第036講物件給大家介紹物件

目錄 0. 請寫下這一節課你學習到的內容:格式不限,回憶並複述是加強記憶的好方式! 測試題 0. 物件中的屬性和方法,在程式設計中實際是什麼? 1. 類和物件是什麼關係呢? 2. 如果我們定義了一個貓類,那你能想象出由“貓”類例項化的物件有哪些? 3. 類的定義有些時候或

第037講物件面向物件程式設計

目錄 0. 請寫下這一節課你學習到的內容:格式不限,回憶並複述是加強記憶的好方式! 測試題 0. 以下程式碼體現了面向物件程式設計的什麼特徵? 1. 當程式設計師不想把同一段程式碼寫幾次,他們發明了函式解決了這種情況。當程式設計師已經有了一個類,而又想建立一個非常相近的新類,他們

第039講物件拾遺

0. 請寫下這一節課你學習到的內容:格式不限,回憶並複述是加強記憶的好方式! (一)組合 上節課我們學習了繼承和多繼承,但是我們有時候發現,有些情況你用繼承也不合適,用多繼承也不是,例如:現在現在要求定義一個類,叫水池,水池裡要有烏龜和魚。那大家就很苦惱了,用多繼承就顯得很奇葩了,因為如

第040講物件一些相關的BIF

目錄 0. 請寫下這一節課你學習到的內容:格式不限,回憶並複述是加強記憶的好方式! 測試題 0. 如何判斷一個類是否為另一個類的子類? 1. 如何判斷物件 a 是否為 類 A 的例項物件? 2. 如何優雅地避免訪問物件不存在的屬性(不產生異常)? 3. Python 的一

BodymovinBodymovinLottie把AE動畫轉換成HTML5/Android/iOS原生動畫 大殺器BodymovinLottie把AE動畫轉換成HTML5/Android/iOS原生動畫

轉自:https://www.cnblogs.com/zamhown/p/6688369.html 大殺器Bodymovin和Lottie:把AE動畫轉換成HTML5/Android/iOS原生動畫   前段時間聽部門老大說,Airbnb出了個移動端的動畫庫Lottie,可

javaIO(1)OutputStreamFileOutputStream原始碼分析及“裝飾者模式”在IO中的應用

前言 一,IO體系 從現在起,我們將基於JDK1.8詳細介紹java.io包中的關於輸入輸出有關的類。瞭解過這個包的都知道,裡面的類繼承關係錯綜複雜,光是弄清楚這些類的關係就夠喝一壺的了。說實話,我也沒有什麼好的方法來一下子就能弄清這些類,但是如果你瞭解“裝

第038講物件繼承

0. 請寫下這一節課你學習到的內容:格式不限,回憶並複述是加強記憶的好方式! 上節課的課後習題我們試圖模擬一個場景,裡邊有一隻烏龜和十條魚,烏龜通過吃魚來補充體力,當烏龜體力消耗殆盡或者魚吃光時遊戲結束。 現在我們想擴充套件遊戲,給魚類進行細分,有金魚(Goldfis

清除浮動的四種方法額外標簽法,overflowhidden,單偽元素雙偽元素

new ont nbsp ola 圖片 分享 col ons pac 當給浮動的元素增加了一個父級元素,但是又不方便給高度的情況下 (父盒子給高度也是一個解決方法,但是大多數情況下,因為盒子的內容會經常改變,父盒子高度固定,需要每次去調整) 此時可以使用下面的四種方法來清

GITforkclone的區別,fetchpull的區別

[1] .cn linu fork bsp sina 指南 lin name 參考資料: [1].Git學習筆記:fork和clone的區別,fetch與pull的區別 [2].在Github和Git上fork之簡單指南 GIT:fork和clone的區別,fetch與p

JAVAEE學習——struts2_03OGNL表達式、OGNLStruts2的結合練習:客戶列表

數據 setvalue mage 工作 準備 nor fig 存在 dir 一、OGNL表達式   1.簡介   OGNL:對象視圖導航語言. ${user.addr.name} 這種寫法就叫對象視圖導航。  OGNL不僅僅可以視圖導航.支持比EL表達式更加豐富的功能

Linux下軟件安裝卸載rpmyum工具

.rpm rhel enabled arch 發包 ble 功能 repos 簡潔 一、rpm工具 rpm命令是RPM軟件包的管理工具。rpm原本是Red Hat Linux發行版專門用來管理Linux各項套件的程序,由於它遵循GPL規則且功能強大方便,因而廣受歡迎。逐漸受

斯坦福大學公開課機器學習advice for applying machine learning | learning curves (改進學習算法高偏差高方差學習曲線的關系)

繪制 學習曲線 pos 情況 但我 容量 繼續 並且 inf 繪制學習曲線非常有用,比如你想檢查你的學習算法,運行是否正常。或者你希望改進算法的表現或效果。那麽學習曲線就是一種很好的工具。學習曲線可以判斷某一個學習算法,是偏差、方差問題,或是二者皆有。 為了繪制一條學習曲

overflowhidden 失效

HTML css overflow出現溢出的情況:1.行內元素不換行內容超出包含塊外邊界2.塊元素寬高超出包含塊外邊界 為什麽會出現overflow:hidden 失效的問題:大多數情況下是給當前元素設置了position:absolute定位屬性,導致脫離文檔流,當前元素不再受包含塊的約束了 解決辦法:給

單點登錄權限管理本質sessioncookie介紹

單點登錄 cookie 介紹 本篇開始寫「單點登錄與權限管理」系列的第一部分:單點登錄與權限管理本質,這部分主要介紹相關的知識概念、抽象的處理過程、常見的實現框架。通過這部分的介紹,能夠對單點登錄與權限管理有整體上的了解,對其相關概念、處理流程、常見實現有個基本的認識。 本篇文章介紹下sessio