HTML + CSS - 网页布局之一般布局浮动布局
1. 一般布局
1.1 一般布局相关参数
元素内容常常可以想像为放在一个盒子里，然后在周边加上内边距，边框和外边距，是盒子模型
默认一个块级区域会填充父类所有的行向空间，并且沿着块伸长容纳其内容，可以为块状体设置某些参数以此满足形状上的要求
例如：
• height
设置块状体的高度
• width
设置块状体的宽度
• border
设置块状体边框的样式，颜色
• padding
定义元素内容与其边框之间的内边距（空白区域）。换句话说，它是在元素的内容区域和边框之间添加的空间，内部距离。
单个值：意味着上、右、下、左的内边距都是 20px
两个值：第一个值用于上下方向的内边距，第二个值用于左右方向的内边距。
padding : 20px 10px 30px 5px;一般布局是一套浏览器视口内组织元素如何放置的系统，默认块级元素按照父类的书写模式
每个块状元素会在上一个元素处另起一行。当块状体中内部文本超过块状体大小，则会自动空行。若相邻元素都设置外边距且接触，保留大的外边距。
1.2 外部设置
margin: 设置元素的外边距，即元素与其他元素之间的空间。它可以控制元素周围的空白区域，从而调整元素在页面中的布局
margin:<top><right><bottom><left>;单一值：四个方向的外边距都相同。一般默认为靠顶部，靠左的距离
两个值：一般默认为靠顶部，靠float设定的距离的距离；
或者直接指定margin：margin-right，margin-left，margin-top，margin-bottom
可自定义选择数值大小，或者使用‘auto’网页自动对齐
2. 浮动布局（Float Layout）
2.1 float
用于使元素浮动，可以实现简单的两栏或三栏布局。
float : left; float : right;将元素分别向左对齐与向右对齐。
<style>
float:left;
</style>设置成功后该元素会脱离正常的文档布局，吸附在父容器设定处。在正常布局中位于该元素之后的内容，此时会围绕浮动元素，填满空间。但与浮动元素同等级别的元素仍然保持正常布局（类似于无视了这个浮动元素）
浮动元素的margin设置对于正常元素与浮动元素之间的距离大小
<style type='text/CSS'>
.container{
background-color:lightgray;
}
.float-box {
float:left;
width:100px;
height:100px;
margin-right:10px;
}
.clearfix::after{
content:"";
display:table;
clear:both;
}
</style>
<body>
<div class="container clearfix">
<div class="float-box"></div>
<div class="float-box"></div>
<div class="float-box"></div>
</div>
</body>浮动元素外元素背景
浮动元素对于在其之下的元素进行吸附。
目标元素的行内盒子被缩短，所以文字会排布在浮动元素周围；但浮动元素从正常文档流移出，故段落的盒子仍然保持原有大小。
<!DOCTYPE html>
<head>
<title>This is a new</title>
<style type="text/css">
body
{
margin:auto;
width:70%;
max-width: 800;
}
.box
{
float:left;
background-color: #ADD8E6;
height:100px;
width:300px;
margin: 10px;
}
.speical
{
background-color: #429FFF;
height:50px;
}
.cleared
{
clear: left;
}
</style>
</head>
<html>
<body>
<h1>Welcome to my news</h1>
<div class='box'>Float
</div>
<div class='speical'>haahahahahhahah</div>
<p class='cleared'>
说起写作文，也许有的同学把它当作一种负担，每当一个新的题目出现在他的眼前时，就头疼不已。
可是在我看来，写作文是一种快乐，它是生活中的乐趣。一个新的题目出现了，我的小脑袋会跟着这个题目不停地转动，
在我小时侯刚开始学写作文时，也曾经有过两眼望青天，不知如何下笔，脑袋里一片空白的经历。
</p>
<p>
记得那是我上二年级的时候，老师让我们回家写一篇作文，题目自定。放学了，我闷闷不乐地回到了家里，一屁股坐在小书桌前发起了呆，一个半小时过去了，我才像挤牙膏一样挤出了一篇作文。我兴冲冲地跑进厨房，高兴地对妈妈说：“我作业写完了，您看！”
妈妈把我的作文拿来一看，什么也没说，只是让我休息。
</p>
<p>
不一会，饭熟了，晚餐可真丰富呀，其中有我最爱吃的炒牛肉，我拿起筷子，往嘴里塞了一大块牛肉，哟，这是啥味呀，妈妈平时炒的牛肉可好吃了，今天怎么搞的，一点味也没有，真难吃！
妈妈笑着对我说：“怎么样，难吃吧？你今天写的作文就像这盘菜一样，一点味道都没有，一篇精彩的作文，就如同一道精美的菜肴，不仅好吃，还耐人寻味。”我迷惑不解地问道：“妈妈，那我怎样才能写出精彩的文章呢？”妈妈听了，耐心地跟我讲解：“要想写好作文，必须牢记这四个字——‘两多三勤’。两多就是多阅读，多积累；三勤就是勤观察、勤思考、勤练笔。
要是能坚持做好“两多三勤’，以后一定能写出精彩的文章来！”
</p>
</body>
</html>
2.2 浮动元素的清除
在浮动元素之后的元素中添加新的类别：cleared
<style>
.cleared
{
clear:left/right/both; /*停止哪一边的浮动元素*/
}
</style>该类别设置后，后续元素均变回正常布局。
2.3 浮动元素的父类处理
浮动元素默认父容器高度坍塌，即调整了子元素元素浮动靠左，默认换行靠左
后续元素操作依然会受到浮动元素的影响
.wrapper
{
background-color: #000000;
color:white;
}
</style>
</head>
<html>
<body>
<h1>Welcome to my news</h1>
<div class='wrapper'>
<div class='box'>Float</div>
<p>It's OKokokookokokokookokokoko
kokokokokokokokokokokokokokokokok</p>
</div>解决方法是使用clearfix技巧
clearfix
当使用float属性让元素浮动时，父容器可能无法正确包含浮动的子元素，导致布局紊乱。
由于float嵌套在父类元素中，所以脱离正常布局，而父类仍然是正常布局。
想要将父类完全显示：
clearfix就是解决这种问题的技巧。
其原理在于，向包含浮动内容及其本身的盒子后方插入一些新的生成内容，并将生成的内容用于清除浮动效果。
.wrapper::after /*最后进行添加*/
{
clear:both;
display:block;
content:''; /*没有内容填充*/
} .wrapper::after
{
content:'';
clear:both;
display:table;
}
</style>
</head>
<html>
<body>
<h1>Welcome to my news</h1>
<div class='wrapper'>
<div class='box'>Float</div>
<p>It's OKokokookokokokookokokoko
kokokokokokokokokokokokokokokokok</p>
</div>