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>