Web前端开发（HTML5+CSS3+JavaScript） 课件 第6章 6.2-浮动

Web前端基础技术CSSJSHTML第6章浮动Contents目录浮动一、浮动浮动是指元素脱离原来的位置，在原来位置上“浮动”出来，不再占据父元素的空间，并具有行内块特征（不换行、可改变大小）。类似绝对定位元素，区别在仅浮动的元素不能直接改变其位置。目的：使多个浮动元素水平排列。应用：水平导航菜单

；浮动列布局用法：float:left左浮动，多个浮动元素逐个从左到右紧密排列。float:right右浮动，多个浮动元素逐个从右到左紧密排列取值为none取消浮动。特性：1.浮动元素不再占据父元素空间，父元素高度为0；具有行内块特征（不换行，超过容器宽度才折行；大小默认由内容决定，可以改变宽度、高度）。2.有副作用：后续非浮动元素将占用浮动元素原有空间，且其后所有元素的文本将环绕浮动元素。链接1链接2链接3链接412例1认识float特性，以及如何消除浮动带来的影响。<divclass="container"><divclass="fl">div1</div><divclass="fl">div2</div></div><divclass="no-fl">正常元素</div><style>*{

box-sizing:border-box;

}.container{

width:400px;

border:10pxsolidred;

}.container>*{height:40px;background-color:yellow;border:2pxsolidblack;}.no-fl{background-color:green;height:40px;width:400px;}</style>1.正常布局2.div1、div2浮动在原来位置/*1.使1,2浮动*//**/

.container>.fl{float:left;}1.浮动元素不再占据父元素空间，具有行内块特征（大小默认由内容决定，可以改变宽度、高度）---父元素的高度为0.2.后续非浮动元素将占用浮动元素原有空间，但后续所有元素的文本将环绕浮动元素。---副作用3.期待如下正常效果1.浮动元素在父元素水平排列，父元素大小由浮动元素决定2.不影响后续元素布局1.父元素使用：overflow：hidden样式。---如果浮动元素的父元素不存在超出其区域的子元素。2.父元素设置高度。---如果浮动元素的父元素存在超出其区域的子元素。3.在最后一个浮动元素之后使用具有clear:both的样式div来清除浮动。.container{

/*...*//*height:60px;*/overflow:hidden;}<divclass="container"><divclass="fl">div1</div><divclass="fl">div2</div>

<divstyle="height:0;border:none;clear:both;"></div></div><divclass="no-fl">正常元素</div>123用于包含浮动子元素的父元素时：使一个块元素成为一个独立的元素---重点在于“独立”的理解：1.不影响父元素外部元素：文字不会因为存在浮动元素而产生环绕;2.父元素的高度由子元素的内容决定认识样式属性overflow特性：本意是溢出块尺寸的的内容如何处理消除浮动的影响措施，使用以下方法之一：例2float样式属性的典型应用1：水平导航栏<ul><li><ahref="#">首页</a></li><li><ahref="#">博客</a></li><li><ahref="#">程序员学院</a></li><li><ahref="#">下载</a></li><li><ahref="#">论坛</a></li><li><ahref="#">问答</a></li><li><ahref="#">代码</a></li><li><ahref="#">直播</a></li><li><ahref="#">能力认证</a></li><li><ahref="#">高校</a></li></ul>

测试容器ul后的元素：这是后面的的文字,是否受到浮动的影响li左浮动浮动元素的父元素不存在超出其区域的子元素

具体实现<style>ul{list-style:none;padding:0;margin:0;/*border:2pxsolidred;*//*方法1*/overflow:hidden;}li{float:left;}

/*方法2*//*ul::after{content:'';display:block;clear:both;}*/a{display:block;padding:20px;text-decoration:none;color:#333;}

/*准备背景图片显示区域*/ul{padding-left:100px;background-image:url('./csdn.png');background-repeat:no-repeat;background-position:leftcenter;/*宽度100px高度自动*/background-size:100px;}/*首页链接显示上边框*/li:nth-of-type(1)a{border-top:2pxsolidred;}例3float样式属性的典型应用2：列布局<h3>三列浮动布局：高度适应内容</h3><divclass="container"><divclass="left">左边</div><divclass="middle">中间</div><divclass="right">右边</div></div>*{box-sizing:border-box;}.container{width:800px;border:1pxsolidgray;

/*消除浮动的影响*/overflow:hidden;}.container>div{float:left;min-height:100px;border:1pxsolid#ccc;