<!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>
/* div {
width: 300px;
background-color: pink;
} */
.wrap {
width: 600px;
height: 600px;
background-color: pink;
}
.wrap>.div1 {
width: 200px;
height: 200px;
/* float: left; */
background-color: aqua;
}
.wrap>.div2 {
width: 200px;
height: 200px;
background-color: rgb(39, 231, 45);
/* float: left; */
}
/* span {
设置元素属性 */
/* display: block;
width: 200px;
height: 200px;
background-color: blue;
float: right;
}
</style>
</head>
<body>
<!--
标准文档流：元素在包含块（父元素）排列是从上向下，从左向右
浮动：
属性：float
取值：right（右） left（左）
-->
<!--
浮动的特点：
1.浮动元素上方有在标准文档流中的块元素，浮动元素不会上移
2.浮动元素不会超出包含块
3.浮动元素脱离标准文档流=>就不用考虑元素性质，都可以设置宽高，一行显示
4.浮动元素后面在标准文档流中的元素会上移=>原因：标准文档流符合一行排完才会到下一行
5.浮动元素会覆盖标准文档流中元素，除了文本内容
-->
<!-- <div>
<p>回见娘会甲非，己。 山帝范也气司们，曰花由才遗下们意兄，次。</p>
<span>说文促土。</span><a href="#">从知的若。</a><span>侯蒲许久锐即，论位。</span>
</div> -->
<!-- <span>的这是落资游者。</span> -->
<div class="wrap">
<span>怒疾搏太牙满谢我。</span>
<div class="div1">lorem1</div>
<div class="div2">Lorem, ipsum.</div>
</div>
</body>
</html>
8584
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
