<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
a {
/*display: inline-block;*/
width: 100px;
height: 100px;
}
.baidu {
float: left;
background-color: green;
}
.guge {
background-color: red;
}
.box1 {
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
.box2 {
width: 400px;
height: 200px;
background-color: green;
/*不浮动就是 02_脱标.html 排序规则3 的示例*/
/*float: left;*/
}
.box3 {
width: 300px;
height: 300px;
background-color: blue;
float: right;
}
.box4 {
width: 100px;
height: 100px;
background-color: aqua;
float: right;
}
/*
标准文档流排版方式: 水平(行内 行内块) 垂直(块级元素);
浮动流：半脱离标准文档流, 属于水平排版
left: 和父元素的左边对齐;
right:和父元素的右边对齐;
注意: 1.浮动流中没有居中对齐，所在 浮动流中使用 margin: 0 atuo是无效的;
2. 浮动中不区分 块级、行内和行内块，都可以水平排版；可以设置宽高
浮动流中的元素 和 标准流中的 __行内块级元素_很像
3.当页面布局使用到了 浮动流的时候, 兄弟元素之间用浮动, 其中一个兄弟用到浮动了的话，其他兄弟也一定要浮动
*/
</style>
</head>
<body>
<!-- 行内元素 -->
<!-- <a href="" class="baidu">百度</a>
<a href="" class="guge">谷歌</a> -->
<!-- 块级元素 -->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>上述运行结果：
337
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
