1 float属性
浮动 float 可以让盒子并排，并且可设置宽高，之间无空白空隙
默认值 float:none;
特点：1）相互贴靠 贴靠时，后边的会往前找可以贴靠的兄弟，若空间不够，则继续向前查找
2）浮动元素可以设置宽高
3）脱离标准流（简称 脱标） 标准流--文档中默认规定的各元素特性 （浮动元素已经不区分 块、行内、行内块 元素了）
浮动会对网页布局造成影响: 浮动元素可能会对后续元素布局产生影响，所以一般清除浮动
清除浮动的方法：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" height="50px">
<img src="person.jpg" height="50px">
</div>
</body>
</html>