浮动布局
作者:
爱新觉罗狗子 | 来源:发表于
2016-11-23 20:31 被阅读0次<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
}
.div1{
background-color: red;
/* float：浮动 right：向右浮动 */
/*float: right;*/
/* 文档流：元素在文档中排列的可见位置。*/
/* 浮动：使元素，脱离自己的文档流，按照指定的方向移动，遇到其他浮动元素以及父级的边界后停止*/
/* 浮动不回复该内容 */
float: left;
}
.div2{
background-color: blue;
}
.div3{
background-color: yellow;
}
</style>
</head>
<body>
<div class="all">
<!-- 清浮动 -->
<!-- 1.clear -->
<!-- 2.BFC，给父级变为BFC -->
<!-- 3.父级浮动可以清除子级浮动 -->
<!-- 注意：想要用浮动的话，容器内的元素一般全都是浮动 -->
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="clear"></div>
</div>
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</body>
</html>
本文标题：浮动布局
本文链接：https://www.haomeiwen.com/subject/aubvpttx.html
网友评论