1.浮動:浮動能使盒子脫離標準文件流;
四大特性 : 1,浮動的元素脫標;
2.浮動的元素互相貼靠;
3.浮動的元素有"字圍"效果(是文字圍繞著浮動盒子顯示)
4.收縮的效果:將塊級元素轉化成行內;
大家一定要謹記:關於浮動,我們初期一定要遵循乙個原則,永遠不是乙個盒子單獨浮動,要浮動就要一起浮動,另外有浮動一定要清除浮動;
清除浮動的方式:
1.給父盒子設定高度;
2.clear : both;
3.偽元素清除法;
4.overflow : hidden;
清除浮動的案例:(.clear : both;方法)
document
案例2:(偽元素清除法;)
.boss1:after2.標準文件流:
哪些標籤不在標準文件流 : 浮動 , 絕對定位 , 固定定位; 如果不是標準文件流的標籤(浮動的標籤或者脫標),那它有四個特性 :
1.浮動的元素脫標;
2.浮動的元素互相貼靠;
3.浮動的元素有"字圍"效果;
4.收縮的效果 : 將塊級元素轉化成行內;
5.不佔位置;
清除浮動的標籤 : 好處: 1.浮動的元素能實現併排;
2.把空白摺疊現象清除;
3.能撐起父盒子的高度;
注意 : 浮動的盒子垂直方向上不會出現坍塌問題 .
只要盒子浮動了就不區分塊級標籤還是行內標籤.
1.可以任意的設定寬高;
2.坍塌問題不會出現;
使用margin : 0 auto 注意點 :
1.使用margin : 0 auto ;水平居中,盒子必須有width,要有明確width. 文字水平居中使用text-align : center;
2.只有標準流下的盒子,才能使用margin : 0 auto ; 當乙個盒子浮動了,固定定位,絕對定位,margin : 0 auto ,不能用了;
3.margin : 0 auto ; 居中盒子,而不是居中文字,文字水平居中使用text-align : center;
標準文件流 浮動
定義 內容從左到右，從上到下書寫的。前面的內容大小或者位置發生變化時，後面的內容位置也會隨之變化。web頁面，就是乙個標準的文件流。內容跟咱們的書寫順序有關。1 空白摺疊現象 無論多少個空格，tab，換行都會摺疊為乙個空格。張老師 真帥 2 高矮不同，底部對齊 妖怪我要你助我修行 3 一行寫滿，自動...
html中清除浮動問題
積累，小白也有大神夢 最近在製作自己的 涉及到了前端的一些問題，在這裡記錄一下，方便以後的溫習。在前端的幾種布局中，經常會運用到float浮動，這個問題。但是應用它也會出現一些問題，今天先記錄一下，目前我遇到的一些問題。第乙個問題是我在運用浮動的時候遇到的等級問題。在運用float中，你先寫的元素，...
CSS浮動以及清除浮動
傳統網頁布局的三種方式 本質 用css擺放盒子。實際開發中，乙個頁面基本都包含了這三種布局方式 1 普通流 標準流 文件流 最基本的布局方式 標籤按照規定好預設方式排列 浮動 float屬性用於建立浮動框，將其移動到一邊知道左邊緣或右邊緣觸及包含塊或另乙個浮動框的邊緣。要想塊元素水平排列如果轉換成行...