內聯元素可以分為替換元素和非替換元素
替換元素:
非替換元素:
內聯元素設定padding:
內聯元素一樣可以設定padding
左右方向的padding會生效,也會達到預期的效果
上下方向的padding會生效,但是不會影響布局,就是說設定上了,但是元素不會有任何移動之類的.
內聯元素設定border:
設定左右的邊框如果左右有元素則會自動移動,而上下的邊框如果下面有內容則會覆蓋下面的內容
內聯元素設定margin:
設定效果跟padding一樣,上下雖然設定上了,但是對布局沒有任何影響.左右會達到預期效果
通過display可以切換內聯元素與塊元素.
設定元素消失
通過overflow設定溢位該怎麼樣處理
overflow:visible;
設定溢位內容在外部正常顯示
overflow:hidden;
設定溢位內容隱藏
overflow:scroll;
設定以水平,垂直滾動條顯示,不管內容是否溢位,都會出現兩個方向的滾動條
overflow:auto;
由瀏覽器進行判斷,哪個方向溢位就會出現哪個方向的滾動條,沒有溢位則不會出現滾動條.
浮動:float有3個值:left左浮動,right右浮動,none預設不浮動
浮動的特點:
浮動的元素會脫離文件流
浮動的元素不分塊元素和內聯元素,都可以設定寬高,margin,padding等
浮動元素沒有辦法撐起父容器的高度
對於沒有浮動的元素來說,就好像浮動的元素不存在一樣,浮動元素下面不浮動的元素會鑽到浮動元素的"底 部",但是文字和,超連結(行內樣式)不會跑到浮動元素的下面(字圍繞效果)
兩個浮動元素之間絕對不會有重疊的情況
後面的浮動元素絕對不會在垂直方向超過前面的浮動元素.
浮動的元素不會再出現margin塌陷
左浮動的元素,會先脫離文件流, 然後努力向左浮動,直到碰到他的父容器的左邊緣或者另外另個浮動元素的右邊緣, 然後停止浮動(右浮動同理)
對於沒有浮動的元素來說,就好像浮動的元素不存在一樣,浮動元素下面不浮動的元素會鑽到浮動元素的"底部",但是文字,(內聯元素)不會跑到浮動元素的下面(字圍繞效果)
在乙個div中,有乙個兒子div,父親div是由兒子div的高度撐起來的,此時兒子div進行浮動後脫離文件流,那麼父親div沒有高度後,後邊的div會頂上來.那麼整個結構就很亂了,必須要清除浮動
方法一:
手動給父元素新增乙個高度
缺點:不夠靈活
方法二:
使用clear屬性清除浮動
clear屬性的作用是清除前面的浮動元素給自己帶來的影響
clear:left;清除左浮動clear:right;清除右浮動clear:both;同時清除左右浮動
缺點:父元素還是沒有高度,設定了clear屬性的元素的margin-top失效
方法三:
使用外牆法,給浮動元素和沒有浮動的元素新增乙個新的塊元素,專門用來清除浮動,給這堵牆設定清除上面浮動元素對牆的影響,下面的元素也可以正常顯示
缺點:影響html的結構,父元素仍然沒有高度
方法四:
使用內牆法,將那堵專門用來清除浮動的牆設定在浮動元素的父元素裡面.因為父元素多了乙個兒子,這個兒子並沒有浮動,那麼父元素必須包含住它,所以父元素就有了自己的高度
方法五:
使用偽元素::after{}給父元素最後新增乙個新的兒子
.clear-fix::after技巧:哪個需要清除就給誰新增乙個類
clear-fix(類名可以自己取)
方法六:
給浮動元素的父元素新增乙個overflow:hidden清除浮動.
CSS的浮動以及清除浮動
給元素新增了float屬性 float left,float right 可以讓元素進行橫向排列 做文字圍繞效果 因為文件流元素會忽視浮動元素的存在，但是文件流元素的文字卻不會。新增了float屬性後，該元素會脫離正常的文件流，所以會覆蓋其他的元素，父元素由於沒有被撐開，造成了高度塌陷。所以清除浮動...
CSS浮動以及清除浮動
傳統網頁布局的三種方式 本質 用css擺放盒子。實際開發中，乙個頁面基本都包含了這三種布局方式 1 普通流 標準流 文件流 最基本的布局方式 標籤按照規定好預設方式排列 浮動 float屬性用於建立浮動框，將其移動到一邊知道左邊緣或右邊緣觸及包含塊或另乙個浮動框的邊緣。要想塊元素水平排列如果轉換成行...
對css浮動的理解以及清除浮動
首先我們要了解什麼是浮動，在css中浮動就是使元素及元素內容脫離文件流，並且使其移動到其父元素的最左或最右邊。移動到其父元素的最左或最右邊 是指向左或向右移動直至碰到另乙個浮動元素或是父元素的邊界 不包括padding 如何清除浮動？通常我們最普遍的作法是直接清除浮動 clear both 但是這樣...