标签：浮动 none after height content display
浮动
何为浮动
浮动，其实就是让元素脱离正常的文档流
为何用浮动？
当正常文档布局不能解决的时候，则需要脱离正常文档流
浮动问题
高度塌陷
没浮动
没浮动
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">
标签：浮动,none,after,height,content,display 来源： https://www.cnblogs.com/Pork-belly8/p/16193688.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。