CSS浮动
浮动
何为浮动
浮动，其实就是让元素脱离正常的文档流
为何用浮动？
当正常文档布局不能解决的时候，则需要脱离正常文档流
浮动问题
高度塌陷
没浮动
没浮动
A右浮动
A左浮动
ABC左浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: red;
/*div1盒子左浮动*/
/*float: left;*/
/*结果：div2盒子往上移，div1盒子覆盖div2盒子*/
}
.box2{
width: 200px;
height: 200px;
background-color: cyan;
/*div2盒子左浮动*/
/*float: left;*/
/*当两个盒子都左浮动时，div1和div2按顺序横向排列*/
float: right;
}
</style>
</head>
<body>
<div class="box1">div1</div>
<div class="box2">div2</div>
</body>
</html>
高度塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高度塌陷</title>
<style>
ul{
border: 1px solid red;
}
li{
/*去除无序列表前的点*/
list-style: none;
width: 50px;
height: 50px;
background-color: hotpink;
/*文字居中*/
text-align: center;
/*左浮动*/
float: left;
/*文字垂直居中*/
line-height: 50px;
/*外边距 上下2px 左右5px*/
margin: 2px 5px;
/*圆角*/
border-radius: 5px;
}
/*解决浮动塌陷问题 里面的属性和属性值也是规定的*/
.clearfix:after{
content: "";
/*转换成块级元素*/
display: block;
/*清除所有的浮动*/
clear: both;
}
</style>
</head>
<body>
<!--无序列表-->
<ul class="clearfix">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
重置css
清除浏览器自带的样式
css文件
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
/*解决浮动塌陷问题 里面的属性和属性值也是规定的*/
.clearfix:after{
content: "";
/*转换成块级元素*/
display: block;
/*清除所有的浮动*/
clear: both;
}
html文件引入css文件
<link rel="stylesheet" href="reset.css">
