一、浮动
块元素浮动向左向右,如果是行元素转成的行内块元素就只能从左开始,无法控制向左向右
float: left | right
特点:
★元素浮动之后不占据原来的位置(脱离了默认文档流布局)
★浮动的盒子在一行上显示
★行内元素浮动之后转换为行内块元素。浮动脱离了文档流的元素会被文档流的块元素阻碍,
但是文档流的块元素不会被浮动元素阻碍(不推荐使用因为浮动元素已经脱离文档流布局了,
转行内元素最好使用display: inline-block;还在文档流布局中)
二、浮动的作用:
1.文本饶图
早期浮动就是用来让文字围绕的,浮动跟文字是不会重叠的记住了
2.制作导航
3.网页布局
注意点:
当父盒子没有定义高度,嵌套的盒子浮动之后,下边的元素发生位置错误。
◆清除浮动不是不用浮动,清除浮动产生的不利影响。
◆清除浮动的方法
clear: left | right | both
工作里用的最多的是clear:both;
1.额外标签法(每次浮动都需要加一个额外div,浮动是很多的,所以不推荐)
在最后一个浮动元素后添加标签。
<div class="main">
<div class="l-left"></div>
<div class="c-main">
<div class="c-top"></div>
<div class="c-bottom"></div>
</div>
<div class="r-right"></div>
<!--额外标签法,清除浮动-->
<!--<div style="clear:both;"></div>-->
</div>
2.给父集元素使用overflow:hidden; bfc
如果有内容出了盒子,不能使用这个方法。
3、伪元素清除浮动法 ,浮动元素的父盒子调用伪元素清除浮动*/
.clearfix:after{
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}
!*兼容ie浏览器*!
.clearfix{
zoom:1;
}*/
<div class="main clearfix">
<div class="l-left"></div>
<div class="c-main">
<div class="c-top"></div>
<div class="c-bottom"></div>
</div>
<div class="r-right"></div>
</div>