1. 了解float的两个重要的特性.
1.1. 包裹性
1.2. 破坏性(浮动会使父元素高度塌陷)
2. float的一些行为表现
2.1. float脱离文档流.
2.2. 元素block块状化,应用float使元素变为块状元素.
2.3. 破坏性造成紧密排列的特性(去空格化)
3. float的实际应用
3.1. 利用破坏性做文字环绕效果
*{margin: 0;padding: 0}
.box{width: 600px; border: 1px #000 solid;margin-left: 50px;margin-top: 50px;}
img{float: left; margin-right: 20px; margin-bottom: 20px;}
<div class="box">
<img src="item.jpg" alt="" />
<p>站长之家(Chinaz.com)10月28日消息 昨天，阿里巴巴集团宣布将旗下旅行品牌“阿里行”升级为全新品牌“飞猪”，英文名“Fliggy”，飞猪品牌将主攻年轻人自由行。2010年阿里巴巴推出了淘宝旅行，2014年10月将其更名为“阿里旅行·去啊”，同时阿里旅行成为阿里巴巴集团旗下的事业群之一。如今“阿里旅行”又升级为全新品牌“飞猪”。那么飞猪品牌有什么特殊含义呢?可以看看以下视频了解一下：据介绍，飞猪将定位为面向年轻消费者的休闲度假品牌，与面向企业差旅服务的阿里商旅一起构成阿里巴巴旗下的旅行业务单元。阿里巴巴集团副总裁、飞猪总裁李少华还表示，目前飞猪用户数已超过2亿，App下载量愈1亿，日均访问用户数达1000万。此外，目前阿里旅行80%的用户为85后年轻群体，因此新品牌飞猪也将主打年轻消费者的境外自由行。
</p>
</div>
3.2. 利用包裹性做顶部导航(如果导航元素非快状元素,还会因为float属性而改变元素为块状元素)
*{margin: 0; padding: 0;}
.nav{width: 600px; height: 30px; background-color: #333;margin-top: 20px;margin-left: 10px;}
.nav>li{list-style: none;color: #fff;float: left;margin-top: 5px;padding: 0 10px; border-left: 1px #fff solid}
.nav>li:first-child{border-left: 0}
.nav>a{text-decoration: none;color: #fff;float: left;margin-top: 5px;padding: 0 10px; border-left: 1px #fff solid}
.nav>a:first-child{border-left: 0}
<!-- 包裹性 -->
<ul class="nav">
<li>首页</li>
<li>关于我们</li>
<li>公司新闻</li>
<li>公司新闻</li>
<li>热卖商品</li>
</ul>
<!-- 元素块状化 -->
<div class="nav">
<a href="">首页</a>
<a href="">关于我们</a>
<a href="">公司新闻</a>
<a href="">公司新闻</a>
<a href="">热卖商品</a>
</div>
3.3. 利用float脱离文档流做自适应布局
*{margin: 0;padding: 0}
.box{width: 600px; border: 1px #000 solid;margin-left: 50px;margin-top: 50px;}
img{float: left;}
p{margin-left: 200px;}
<div class="box">
<img src="item.jpg" alt="" />
<p>站长之家(Chinaz.com)10月28日消息 昨天，阿里巴巴集团宣布将旗下旅行品牌“阿里行”升级为全新品牌“飞猪”，英文名“Fliggy”，飞猪品牌将主攻年轻人自由行。2010年阿里巴巴推出了淘宝旅行，2014年10月将其更名为“阿里旅行·去啊”，同时阿里旅行成为阿里巴巴集团旗下的事业群之一。如今“阿里旅行”又升级为全新品牌“飞猪”。那么飞猪品牌有什么特殊含义呢?可以看看以下视频了解一下：据介绍，飞猪将定位为面向年轻消费者的休闲度假品牌，与面向企业差旅服务的阿里商旅一起构成阿里巴巴旗下的旅行业务单元。阿里巴巴集团副总裁、飞猪总裁李少华还表示，目前飞猪用户数已超过2亿，App下载量愈1亿，日均访问用户数达1000万。此外，目前阿里旅行80%的用户为85后年轻群体，因此新品牌飞猪也将主打年轻消费者的境外自由行。</p>
</div>
4. 清除浮动
4.1. 清除浮动的理由:因为浮动会导致父元素高度塌陷,所以要清除浮动
4.2. 在子元素出现浮动且父元素不可定高的情况下使用清除浮动.
4.3. 主流清除浮动的代码:
/*清除浮动*/
.clearfix { *zoom: 1;}
.clearfix:before, .clearfix:after { display: table; line-height: 0; content: "";}
.clearfix:after { clear: both;}
清除浮动的几种方式
4.4 关于浮动的其他知识补充:
浮动是一个历史久远的属性.创造他的人在当时的历史背景下考虑制作图片环绕文字效果,并未考虑float制作复杂的页面布局.在低版本浏览器中浮动的bug非常之多.即使不考虑ie,就在当下也要随时警惕清除浮动.大量使用浮动,并非是好事.
4.4.1. 浮动替代方案一
使用display:inline-block来代替浮动.内联块状元素有块元素可以完全控制margin padding的优点,同时也能像行内元素那样不换行.但是包括ie8下的浏览器不认识这个属性.这里不吐槽了.
4.4.2. 浮动替代方案二
使用弹性盒子模型.弹性盒子模型不但解决了float问题,还解决了响应式问题.是手机布局的神器.但是pc端慎用.这个css3属性并不像圆角属性那样普及.IE11才支持.谷歌浏览器和火狐浏览器要加前缀才能使用.下面用谷歌浏览器作为演示.
*{margin: 0;padding: 0}
a{color: #fff;text-decoration: none;}
.box{ height: 30px; background-color:#333;padding: 0 15px; display: flex; display: -webkit-flex;}
.item{-webkit-flex: 1;flex: 1;text-align: center; border-left: 1px solid #444;height: 20px;margin-top: 5px;}
.item:first-child{border-left: 0;}
<div>
<div class="box">
<div class="item"><a href="">导航</a></div>
<div class="item"><a href="">新闻</a></div>
<div class="item"><a href="">娱乐</a></div>
<div class="item"><a href="">体育</a></div>
<div class="item"><a href="">财经</a></div>
<div class="item"><a href="">图库</a></div>
</div>
</div>
5. 用弹性盒子布局分三步
5.1. 为父容器加display:flex表示设置一个弹性盒子.里面的div将不会换行
5.2. 子元素设置flex值,表示每个容器占多少空间.
5.3. 调整子元素之间的dom顺序用order.order值增大,dom顺序往后,order值减小,dom顺序靠前. order 默认值为0
参考文档:
flex布局
grid布局
