一、效果
二、代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动</title>
<style>
.father {
width: 500px;
height: 500px;
background-color: pink;
padding: 10px;
margin: 10px;
}
.son {
width: 200px;
height: 200px;
background-color: skyblue;
float: right;
/* 元素的浮动特性是与父元素对齐的，比如这里的右浮动就是浮动到父元素的最右边
且浮动子元素是不会压着父元素的内边距和外边距的；即不会压到padding上去
*/
}
.show {
height: 200px;
background-color: pink;
float: left;
/* 发现块级元素加上浮动之后具有行内块特性 */
}
span {
background-color: purple;
height: 100px;
float: left;
/* 行内元素加上了浮动之后也具有了行内块元素的特性 */
}
/*
总结一下：
元素加上了浮动之后，元素会具有行内块元素的特性，即可以在一行排列
元素的具有宽高属性，其大小取决于定义大小或者默认内容的多少
*/
</style>
</head>
<body>
<div class="father">
<!-- 浮动首先添加标准流父级元素以防止浮动导致的位置空出，样式混乱 -->
<div class="son"></div>
</div>
<div class="show">三傻大闹宝莱坞</div>
<span>啊哈哈哈哈哈哈</span>
</body>
</html>
