css浮動
1.定義
定義元素框相對於其正常位置應該出現的位置
2.分類
3.浮動定位指
• 將元素排除在普通流之外
• 元素將不在頁面中佔據空間
• 將浮動元素放置在包含框的左邊或者右邊
• 浮動元素依舊位於包含框之內
浮動的框可以向左或者向右移動，直到他的外邊緣碰到包含框或另乙個浮動框的邊框為止。
4、浮動 float:left|right|none;
特點：浮動後排除到文件流以外，在網頁中不佔據位置。
浮動是碰到父元素的邊框或者浮動元素的邊框就會停止，浮動不會重疊。
浮動沒有上下浮動。
浮動後所有元素轉換為塊級元素。
5、彈性盒模型
5.1、父元素屬性
1)display:flex;
子元素預設水平顯示
2)flex-direction: column; //方向
設定子元素垂直排列
3）主軸對齊方式
justify-content: flex-start; 預設值，居左
justify-content: flex-end; 居右
justify-content: center; 居中
justify-content: space-around; 四周
justify-content: space-between; 之間
4)側軸對齊方式
align-items:stretch 專案拉伸適應容器，預設值
align-items: flex-start; 居上
align-items: flex-end; 居下
align-items: center; 居中
5.2、子元素的屬性
flex-grow:number; （所佔的比例）
規定專案將相對於其他靈活的專案進行擴充套件的量。預設值0。
清除浮動
1、屬性：clear
值：left、right、both
1)受影響的元素加 clear:both;
2)浮動元素的父元素加overflow:hidden;或者overflow:auto;
3)浮動元素後面加空div clear:both;
4)父元素加height（父元素的高度已知才能用）
5)偽物件法（和加空div）
浮動元素的父元素:after塊元素與行元素是可以轉換的，也就是說display的屬性值可以由我們來改變 。
display常見屬性值
1. none：隱藏物件
2. inline：指定物件為內聯元素
3. block：指定物件為塊元素
4. inline-block：指定物件為內聯塊元素
5. table-cell：指定物件作為**單元格，行。 配合vertical-align:使用的多
6. flex：彈性盒
3、visibility:hidden和display:none和opacity:0的區別：
1.visibility:hidden和opacity:0會將元素隱藏，但是物理空間實際存在
2.display:none 影藏元素，不保留物理空間
例子：display隱藏引用
首頁 首頁
首頁
position屬性指定乙個元素（靜態的，相對的，絕對或固定）的定位方法的型別。
position 定位
屬性值：
子元素在父元素中水平垂直居中
1.彈性盒
.container
.box
.container
.box
CSS定位 浮動定位
css定位機制 浮動定位 float屬性 進行浮動定位 left，right clear屬性 清除浮動 left，right，both float屬性 1.概述 div實現橫向多列布局 float屬性 left 左浮動 right 右浮動 none 不浮動 下圖為 的實現 float屬性用途 在 混...
CSS學習筆記 浮動 六
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。浮動框浮動後，將脫離原來的普通文件流，並且不會占用空間，層級會高於普通文件流。浮動元素會生成乙個塊級框，而不論它本身是何種元素。浮動元素一般要指定乙個明確的寬度 否則，它們會盡可能地窄。屬性名稱 取值 描述 float l...
css浮動定位
請看下圖，當把框 1 向右浮動時，它脫離文件流並且向右移動，直到它的右邊緣碰到包含框的右邊緣 如果把所有三個框都向左移動，那麼框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前乙個浮動框。在 css 中，我們通過 float 屬性實現元素的浮動。浮動框旁邊的行框被縮短，從而給浮動框留出空間...