HTML5+css3（浮动，浮动的相关属性，float，解决浮动的塌陷问题，clear，overflow，给父亲盒子加高度，伪元素）
浮动的相关属性
以下使浮动的常用属性值：
float： 设置浮动
以下属性：
left : 设置左浮动
right : 设置右浮动
none ：不浮动，默认值
clear 清除浮动 清除前面兄弟元素浮动元素的响应
以下属性：
left ：清除前面左浮动的影响
right ：清除前面右浮动的影响
both ：清除前面左右浮动的影响
元素浮动之后的特点
-
在上面我们知道了对于浮动的元素，其会脱离标准文档流。
-
浮动产生的影响：
- 脱离文档流。
- 不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高。
- 不会独占一行，可以与其他元素共用一行。
- 不会margin 合并，也不会margin 塌陷，能够完美的设置四个方向的margin 和padding 。
- 不会像行内块一样被当做文本处理（没有行内块的空白问题）。
6.当元素浮动之后，下面的元素就可以向上提升位置，占有浮动元素的位置。
解决浮动产生的影响
- 浮动产生的一些困扰：
- 对兄弟元素的影响： 后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。
- 对父元素的影响： 不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。
- 其实最主要要解决的影响是（父元素高度塌陷），以下是解决方案：
- 方案一： 给父元素指定高度。
- 方案二： 给父元素设置浮动，带来其他影响。
- 方案三： 给父元素设置 overflow:hidden 。
- 方案四： 在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置clear:both
- 额外标签：谁需要清除浮动就在该元素后面添加一个空白标签，属性设置为：clear:both
-
方案五： 给浮动元素的父元素，设置伪元素，通过伪元素清除浮动 （推荐使用）
-
伪元素 对于其父元素，我们可以给其加上一个类，并对该类进行如下设置：
.clearfix::after {/* 设置添加子元素的内容是空 */content: '';/* 设置添加子元素为块级元素 */display: block;/* 设置添加的子元素的高度0 */height: 0;/* 设置添加子元素看不见 */visibility: hidden;/* 设置clear：both */clear: both;
}作业
- 盒子模型
<!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>*{margin: 0px auto;padding:0px;/* 自动减去边距宽度 */box-sizing: border-box;}/* 整体 */#all{width: 970px;height: 586px;/* 整体背景颜色，看效果 *//* background-color: palegoldenrod; */}/* 顶部 */#top{width: 970px;height: 103px;/* 在最开始设置整体布局可以写一下 *//* background-color: pink; */}/* 红色的盒子 */.left1{float: left;width: 277px;height: 103px;background-color: red;}/* 右边 */.right1{float: right;width: 679px;height: 103px;}/* 语言选择 */.chinese{float: right;width: 137px;height: 49px;background-color: green;margin-bottom: 8px;}/* 导航条 */.banner{overflow: hidden;width: 679px;height: 46px;background-color: green;}/* 中部 */#middle{width: 970px;height: 435px;/* background-color:pink ; */margin-top:8px ;}/* 黄色部分 大广告 */.left2{float: left;width: 310px;height: 435px;background-color: yellow;margin-right: 10px;}/* 中部的中部部分 蓝色部分 */.center{float: left;width: 450px;height: 435px;}.one{width: 450px;height: 240px;background-color: skyblue;}.two{width: 450px;height: 110px;background-color: skyblue;margin-top: 10px;}.three{width: 450px;height: 30px;background-color: skyblue;margin-top: 10px;}.right2{overflow: hidden;width: 190px;height: 400px;background-color: purple;}/* 深蓝色 */.blue{float: left;width: 648px;height: 25px;background-color: blue;margin-top: 10px;}/* 底部 */#bottom{width: 970px;height: 40px;background-color: darkorange;margin-top: 10px;}</style>
</head>
<body><!-- 整体盒子模型 --><div id="all"><!-- 顶部 --><div id="top"><!-- 红色的盒子 --><div class="left1"></div><!-- 右部分 --><div class="right1"><div class="chinese"></div><div class="banner"></div></div></div><!-- 中部 --><div id="middle"><!-- 黄色部分 --><div class="left2"></div><!-- 浅蓝色部分 --><div class="center"><div class="one"></div><div class="two"></div><div class="three"></div><!-- 深蓝色 --><div class="blue"></div></div><!-- 紫色 --><div class="right2"></div></div><!-- 底部 --><div id="bottom"></div></div>
</body>
</html>
- 公告
<!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>*{margin: 0px;padding:0px;}#all{width: 500px;height: 400px;}.top{width: 480px;/* height: 100px; */margin: 10px;margin-bottom: 0px;border-top: 1px dashed;} .bgc{width: 480px;height: 20px;background-color: rgb(227, 235, 241);}p{display: inline-block;border-left:3px solid blue ;padding-left: 16px;margin-left: 5px;font-size: 24px;/* margin-top: 20px; */color: blue;font-weight:bolder;}.top a{float: right;margin-top: 10px;color:blue ;}a{text-decoration: none;}.one{width: 480px;height: 2px;background-image: linear-gradient(to right , rgb(61, 47, 187),red);margin-top: 5px;}.bottom{width: 500px;}.bottom li{border-bottom: 1px dashed rgb(210, 207, 207);background: url(..//imgs/triangle1.png) no-repeat 4px;background-size: 12px 12px;padding: 5px;padding-left: 24px;margin: 10px;}span{float: right;}</style>
</head>
<body><!-- 整体 --><div id="all"><!-- 通知公告 --><div class="top"><div class="bgc"></div><p>通知公告</p> <a href="#">更多》</a><div class="one"></div></div><!-- 内容 --><div class="bottom"><ul><li><a href="#">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</a><span>2014年9月28号</span></li><li><a href="#">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</a><span>2014年9月28号</span></li><li><a href="#">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</a><span>2014年9月28号</span></li></ul></div></div>
</body>
</html>