css-浮動/清除float/overflow/vertical-align
1 float屬性
浮動 float 可以讓盒子並排，並且可設定寬高，之間無空白空隙
預設值 float:none;
特點：1）相互貼靠 貼靠時，後邊的會往前找可以貼靠的兄弟，若空間不夠，則繼續向前查詢
2）浮動元素可以設定寬高
3）脫離標準流（簡稱 脫標） 標準流--文件中預設規定的各元素特性 （浮動元素已經不區分 塊、行內、行內塊 元素了）
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>Document</title> <style> /*去掉瀏覽器預設新增的paddingmargin*/ *{ padding:0; margin:0; } .wrapdiv{ width:200px; height:200px; /*display:inline-block;*/ background-color:red; float:left; /*float:none;*/ margin-right:10px; }/*.wrapdiv.box4{ margin-right:0; }*/
/*脫標後則不再區分塊/行內/行內塊元素*/ span{ width:120px; height:150px; float:left; margin:10px10px00; background-color:royalblue; } </style> </head> <body>
<!--兩個有寬高的盒子實現並排
思路1：將兩個盒子轉換為行內塊 效果：實現並排但是盒子之間有空隙
思路2：float浮動可以讓元素並排並且可以設寬高 效果：實現並排，相互貼靠且沒有空隙
<divclass="wrap"> <divclass="box1">box1</div> <divclass="box2">box2</div>
<divclass="box3">box3</div> <divclass="box4">box4</div> <divclass="box5">box5</div> <divclass="box6">box6</div> </div>
浮動會對網頁佈局造成影響: 浮動元素可能會對後續元素佈局產生影響，所以一般清除浮動
清除浮動的方法：1）給浮動的元素的父親設定高度
不靈活 需要提前知道子元素的高；一般父親是靠兒子撐開的
2) 給父親增加一個子元素，給子元素設定一個屬性clear:both
會增加一個html結構 一般儘量少一些html結構，否則影響頁面渲染的效能
3）overflow:hidden 本意：隱藏多餘的 東西
給父級新增該屬性可以清除浮動
4）第二種方法升級 用css給父級新增一個偽元素
優點：可清除浮動，且不增加html結構 缺點：不能複用
.wrap:after{
contant:' ';
display:block;
clear:both;
}
5) 用class類解決 ，可複用 ，但是有相容性問題
.clearfix:after{ ie7以下不相容
contant:' ';
display:block;
clear:both;
}
.clearfix{ 低版本專用 eg:ie6
*zoom:1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 浮動的元素 可能會對後續元素佈局產生影響，所以一般清除浮動
清除浮動方法：
1 給浮動元素的父親設定高度-----有高度的盒子可以關閉浮動
缺點 ：不靈活 該方法需要提前知道兒子的高度；通常情況下，父親靠兒子撐開
2 clear:both
在父親末尾新增一個元素 給這個元素設定屬性clear:both
可以清除浮動，並且父親的高度也被撐開
缺點：多了 html結構 寧可多css程式碼，html結構儘量少，否則影響頁面渲染
3 overflow:hidden; 原始作用：將多餘的東西隱藏
給浮動元素的父親增加一個屬性 overflow:hidden;
4 用css加元素 即第二種方法的升級
用css 在 父級增加一個偽元素
優點：清除浮動，且不會增加 html結構
缺點：不能複用
.wrap:after{
content: ''; 偽元素不要內容，但 一定要寫
display: block;
clear: both;
}
5 最優方法 用class類解決，可複用 ie7以下不相容 after偽元素
*/
*{
padding: 0;
margin: 0;
}
.wrap{
border: 4px solid blue;
/* height: 200px; */
/* overflow: hidden; */
}
.wrap div.box1,
.wrap div.box2{
width: 200px;
height: 200px;
float: left;
}
.wrap .box1{
background-color: salmon;
}
.wrap .box2{
background-color:red;
}
.wrap2{
widows: 300px;
height: 200px;
background-color: seagreen;
}
/* .cleardiv{
clear: both;
} */
.wrap:after{
content: '';
display: block; /*不寫時 新增的預設為行內元素*/
clear: both;
}
/* after 偽元素 ie7以下不相容 */
.clearfix:after{
content: '';
display: block;
clear: both;
}
/* 低版本瀏覽器專用 eg：ie6 */
.clearfix{
*zoom: 1;
}
</style>
</head>
<body>
<div class="wrap clearfix">
<div class="box1">box1</div>
<div class="box2">box2</div>
<!-- <div class="cleardiv"></div> -->
</div>
<div class="wrap2"></div>
</body>
</html>
overflow 和 vertical-align屬性的用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
border: blueviolet 2px solid;
width: 400px;
height: 100px;
/* 讓溢位的內容隱藏 */
overflow: hidden;
/* 預設值 顯示 */
overflow: visible;
/* 滾動 顯示滾動條 溢位可以顯示滾動條，否則不可用 */
overflow: scroll;
/* 內容溢位則顯示滾動條 不溢位不顯示滾動條 */
overflow:auto;
}
/* 行內元素 行內塊元素 對齊方式
文字與圖片 垂直 方向的對齊方式
圖片與圖片 垂直方向的對齊方式
*/
img.img1{
/* 預設值 基線對齊 */
vertical-align: baseline;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
}
</style>
</head>
<body>
<!-- overflow 示範 -->
<div class="box">
這是內容這是內容這是內容這是內容這是內容這是內容
這是內容這是內容這是內容這是內容這是內容這是內容
這是內容這是內容這是內容這是內容這是內容這是內容
這是內容這是內容這是內容這是內容這是內容這是內容
這是內容這是內容這是內容這是內容這是內容這是內容
這是內容這是內容這是內容這是內容這是內容這是內容
這是內容這是內容這是內容這是內容這是內容這是內容
這是內容這是內容這是內容這是內容這是內容這是內容
</div>
<!-- vertical-align 示範 -->
<span>123</span>
<div class="box2">
<img class="img1" src="dog.jpeg" alt="" height="50px">
<img src="person.jpg" alt="" height="50px">
</div>
</body>
</html>