默认文档流
默认文档流的特征:文档结构从外到内,自上而下,从左到右
项目中使用默认文档流来实现第一层结构的布局/第二层结构的布局
正常的文档流结点树:
1.块级元素:(垂直方向的线性结构)宽度默认100%,高度默认由子元素填充好,但css中宽高也可重新定义
2.行内元素:(水平方向的线性结构)宽高由内容决定,不可以自定义
浮动布局float
脱离正常的文档流、脱离结点树,浮动在后面的兄弟节点之上
作用:针对块级元素操作,经过float操作之后块级元素也可实现从左到右布局
none
默认为none,即不脱离文档流
<style>
body>div>div{
width: 200px;
height: 200px;
background-color: rgba(255, 0, 0, 0.3);
}
.one>div{
float: none;
}
</style>
</head>
<body>
<div class="one">
<div></div>
<div></div>
<div></div>
</div>
<div class="two">
<div></div>
<div></div>
<div></div>
</div>
</body>
网页效果:
left
float:left/right 浮动是针对修饰的当前元素进行脱离
margin-left+margin-top:搭配left来定边距
margin-right+margin-top:搭配right来定边距
不要float和left、right、top、bottom直接搭配使用
<style>
body>div>div{
width: 200px;
height: 200px;
background-color: rgba(255, 0, 0, 0.3);
}
.one>div{
float: left;
}
</style>
</head>
<body>
<div class="one">
<div></div>
<div></div>
<div></div>
</div>
<div class="two">
<div></div>
<div></div>
<div></div>
</div>
</body>
网页效果:
.three>div{
background-color: rgba(0, 255, 0, 0.3);
}
/* 第1、2个div:非正常的文档流 浮动
第三个div:正常的文档流 */
.three>div:nth-child(1),.three>div:nth-child(2){
float: left;
}
<div class="three">
<div></div>
<div></div>
<div></div>
</div>
网页效果:
right
.three>div{
background-color: rgba(0, 255, 0, 0.3);
}
.three>div:nth-child(1),.three>div:nth-child(2){
float: right;
}
<div class="three">
<div></div>
<div></div>
<div></div>
</div>
网页效果:
父元素的支撑
解决 失去对父元素的支撑 问题:1.clear:both;
2.父元素:设置高度
3.父元素 overflow:hidden;
ul#u2 li{
float: right;
}
ul#u2::after{
content: '';
display: block;
clear: both;
}
/* clear:both; */
<ul id="u2">
<li>退出</li>
<li>购物车</li>
<li>收藏</li>
<li>我的</li>
</ul>
<div class="imgshow"></div>
网页效果:
ul#u3 li{
float: left;
}
ul#u3{
height: 40px;
/* 父元素:设置高度 */
}
<ul id="u3">
<li>菜单</li>
<li>菜单</li>
<li>菜单</li>
<li>菜单</li>
</ul>
<div class="imgshow"></div>
网页效果:
ul#u4 li{
float: left;
}
ul#u4{
overflow: hidden;
/* 父元素 overflow:hidden; */
}
<ul id="u4">
<li>菜单</li>
<li>菜单</li>
<li>菜单</li>
<li>菜单</li>
</ul>
<div class="imgshow"></div>
网页效果:
多列布局
一行两列
.one div{
width: 200px;
height: 200px;
background-color: pink;
}
.one>div:first-child{
/* 下面三行设置与last-child的设置相对应,一起完成一行两列效果 */
/* float: left; */
/* float: left; */
float: right;
}
.one>div:last-child{
/* float: left; */
/* float: right; */
/* 不赋值 对父元素有支撑 */
}
<div class="one">
<div>2</div>
<div>1</div>
</div>
网页效果:
一行四列
.two>div{
/* 设置为边框盒子,可以解决因为加边框或者padding值等发生的盒子大小不一致问题 */
box-sizing: border-box;
width: 20%;
/* 平均分配占据的大小 */
height: 100px;
background-color: palegoldenrod;
float: left;
margin-left: 4%;
margin-bottom: 20px;
/* 设置该值让元素有边距 */
}
.two>div:nth-child(2){
border: 10px solid red;
}
.two>div:nth-child(3){
padding: 20px;
}
.two::after{
/* 让后面元素不浮动到two的同一行中 */
content: '';
display: block;
clear: both;
}
<div class="two">
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
网页效果:
未设置margin-bottom时:
多行多列
与上面类似
文字环绕图片
img{
float: left;
/* float: right; */
margin-right: 20px;
/* 与文字保持举例↑ */
}
<img src="../图片文件/验证码.png">文字
网页效果:
清除浮动clear
float浮动产生的问题:①失去对父元素的支撑(overflow:hidden;)
②兄弟元素会顶上来(清除浮动clear:both;)
未清除浮动时:
clear属性 | 规定元素的哪一侧不允许其他浮动元素 |
---|---|
left | 在左侧不允许浮动元素 |
right | 在右侧不允许浮动元素 |
none | 默认值。允许浮动元素出现在两侧 |
inherit | 规定应该从父元素继承 clear 属性的值 |
both | 在左右两侧均不允许浮动元素 |
.imgleft{
width: 200px;
height: 200px;
background-color: pink;
float: left;
margin-left: 50px;
}
#detail{
width: 800px;
height: 200px;
background-color: plum;
/*书写位置1:下一个非浮动的兄弟节点*/
clear: both;
/* 对当前元素的之前元素进行冻结(清除兄弟元素浮动产生的影响)*/
}
<div>
<div class="imgleft"></div>
<div class="imgleft"></div>
<div class="imgleft"></div>
<div id="detail"></div>
网页效果:
/*书写位置2:在下一个位置新增一个兄弟<divclass="clearboth"></div>*/
/*在html文件中添加一个无意义的div*/
<div id="clearboth"></div>
/*然后在css样式中写这样的一个公共样式*/
.clearboth{
clear: both;
}
/*书写位置3:在最后一个元素后新增一个兄弟(伪元素)
父元素::after{content: '';
display: block;
clear: both;} */
ul li{
float: left;
margin-left: 20px;
}
/* 在ul后面新增伪元素清除浮动 */
ul::after{
content: '';
display: block;
}
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
<div id="article"></div>
清除浮动前后网页效果对比: