浮动
一.什么是浮动（float)
浮动就是让元素可以向左或向右移动，直到它的外边距碰到其父级的内边距或者是上一个元素的外边距(这里指的上一个元素不管它有没有设置浮动，都会紧挨着上一个元素）
二.浮动（float)语法：
float:left或者right或者none或者inherit
left：让元素向左浮动
right：让元素向右浮动
none：让元素不浮动
inherit：让元素从父级继承浮动属性
三.浮动的特性
1.支持所有的css样式
2.内容撑开宽高
3.多个元素设置浮动，会排在一排
4.浮动的框可以向左或者向右移动，直到他对外边缘碰到包含框或 另一个浮动框的边框为止。
5.文档流
四.浮动的具体表现
六、代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>不框架的开始就浮动</title>
<style type="text/css">
#father{
width: 600px;
height: 30px;
background: lightblue;
margin: 100px auto 0;
}
#son1{
width: 500px;
height: 100%;
background: lightgreen;
float: left;
}
#son2{
width: 100px;
height: 100%;
background: lightpink;
float: left;
}
</style>
</head>
<body>
<!-- 浮动的框可以向左或者向右移动，直到他对外边缘碰到包含框或 另一个浮动框的边框为止。
文档流 -->
<div id="father">
<div id="son1">
</div>
<div id="son2">
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号