一.浮动float
1.定义
2.特点
- 浮动元素不占用标准流的位置
- 浮动会影响后面的元素
- 块级元素和行级元素浮动后会转换为行内块元素
- 多个浮动元素可以在一行上显示,以浮动元素顶端基线对齐
3. 作用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字环绕</title>
<style type="text/css">
div {
width: 200px;
border: 1px solid red;
}
img {
width: 100px;
height: 50px;
float: left;
}
</style>
</head>
<body>
<!-- 容器中包含了图片和文字 -->
<div>
<img src="导航.png">
呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵
呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵
呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵
</div>
</body>
</html>
二.清除浮动
1.使用clear:left|right|both
- 在浮动元素最后面添加一个空的块级或行内块元素,设置clear:both样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 500px;
margin: 0px auto;
background-color: pink;
}
a {
float: left;
height: 50px;
line-height: 50px;
padding: 0px 10px;
text-decoration: none;
}
a:hover {
background-color: gray;
}
</style>
</head>
<body>
<div class="box">
<a href="#">导航1</a>
<a href="#">导航2</a>
<a href="#">导航3</a>
<!-- 使用clear清除浮动的空标签必须是块级元素或行内块元素（行内元素清除无效） -->
<div style="clear:both;"></div>
</div>
</body>
</html>
2.使用overflow:hidden
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 500px;
border: 1px solid green;
overflow: hidden;
}
.div1 {
width: 200px;
height: 300px;
background-color: yellow;
float: left;
}
.div2 {
width: 150px;
height: 200px;
background-color: green;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
</div>
</body>
</html>
3.使用伪元素清除 :after
.clearfix:after{
content:"";
display: block;
height: 0px;
line-height: 0px;
clear: both;
visibility: hidden;
}
.clearfix{
zoom:1;
}
4.清除浮动时机（消除父元素后面兄弟元素的错位影响）
- 父元素没有设置高度
- 父元素没有设置高度，则其高度由子元素撑开，但子元素浮动在页面不占用位置，所以实际上不占用高度，对父元素后面的兄弟元素造成错位影响
- 如果父元素有设置高度，表示父元素已经在页面占用了高度，不会对父元素后面的兄弟元素造成错位影响
- 父元素中所有子元素设置了浮动
- 一组浮动的元素应该放进同一个父容器中进行浮动
- 如果父容器中某个子元素不浮动，会导致子元素错位
三.overflow
1.概念
2. 属性值
- visible：默认值，内容不会被修剪，会呈现在边框之外
- hidden：内容会被修剪，溢出边框那部分内容会被隐藏
- scroll：内容会被修剪，浏览器会显示滚动条以便查看溢出的内容(无论内容是否溢出，滚动条都会显示)
- auto：如果内容溢出边框，则显示滚动条，如果内容不溢出边框，则不显示滚动条
3.overflow:hidden作用
- 解决垂直方向父元素中子元素padding-top导致的塌陷
- 清除浮动,
- 把溢出的内容隐藏
四.样式初始化
body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dt,dd {
margin: 0;
padding: 0;
list-style: none;
font-size: 12px;
font-family: "宋体","微软雅黑";
color: #000;
}
a {
color: #000;
text-decoration: none;
}
a:hover {
color: red;
}
img,input {
margin: 0;
padding: 0;
border: 0 none;
outline-style: none;
}
.clearfix:after {
content: "";
height: 0;
line-height: 0;
display: block;
clear: both;
visibility: hidden;
}
.clearfix {
zoom: 1;
}
