浮动与定位，浮动定位(html5技术)

Posted 2022-12-06 牵只蜗牛去散步!

　　浮动与定位在网页设计中应用得很广泛，是两种主要布局方式的实现方法。

　　我们知道，网页上一般来说，块标签是自上而下的一块块堆叠，行内标签则在一行内从左到右依次并排，如果所有网页的都这样机械的排列着，也太单调了，所以有没有一个东西让标签内容脱离这种文档流呢，首先就可以考虑float。

　　float，使某元素浮动起来，可以把元素移到，比如浏览器边沿的左边或右边，看上去它们就像粘在边沿上一样，它下边的文本则会充斥在它的一边或者下面，如下例

<! DOCTYPE html >   < html >   < head >   < title > float test </ title >   < style  type ="text/css" > /* reset */  body,div,p,a,ul,li,h1,h2,h3,h4,h5,h6,pre,img margin : 0 ; padding : 0 ;  .wrap width : 300px ;  margin : 0 auto ;  border : 2px solid #30c13a ;    .wrap .fl  width : 100px ; float : left ;  background-color : #8cceff ;     </ style >   </ head >   < body >   < div  class ="wrap" >   < p class ="fl" >  The Macintosh Classic is a personal  </ p >   < p >  It was the first Apple Macintosh sold under US$1,000. Production of the Classic was prompted by the success of the Macintosh Plus and the SE.  </ p >   </ div >   </ body >   </ html >   View Code

　　效果

　　float有三个值：left、right、none，向左、向右或者不使用浮动。上边是向左浮动（蓝色背景），跟在它后边p标签中的文本没给任何样式，本来两个p标签中的文本块会一上一下分段堆叠，加了float left后，下边p标签中的文本，就环绕在它周围，包括下边和右边。

　　一般我们在设置浮动时会给浮动块一个宽度，这样才能显示浮动的意义，如果任由其充满在其父元素中一整行就不需要浮动了，但是多的文本又会跑到浮动块的下边去，所以让两个块分开来更合理，可以对右边环绕的文本块加一个margin（或者再加一个padding），这个左边距至少要是浮动块的盒模型宽度（注意不是左边元素本身的width属性值，还包括了它的padding、border和margin），通常比这个宽度略大，比如这里可以给右边那个文本块设置：margin-left:110px; ，将两个块隔离开。

　　因为浮动脱离了html文档流，所以有时候浏览器在计算块的宽高时，没有将浮动的模块算在内，比如下边这样

<! DOCTYPE html >   < html >   < head >   < title > float test </ title >   < style  type ="text/css" > /* reset */  body,div,p,a,ul,li,h1,h2,h3,h4,h5,h6,pre,img margin : 0 ; padding : 0 ;  .wrap width : 300px ;  margin : 0 auto ;  border : 2px solid #30c13a ;    .wrap .fl  width : 100px ; float : left ;  background-color : #8cceff ;     </ style >   </ head >   < body >   < div  class ="wrap" >   < p class ="main" >  It was the first Apple Macintosh sold under US$1,000. Production of the Classic was prompted by the success of the Macintosh Plus and the SE.  </ p >   < p  class ="fl" > The Macintosh Classic is a personal  </ p >   </ div >   </ body >   </ html >   View Code

　　效果

　　就是将上例中的浮动模块和右边的文本模块调换了位置，去掉了右边文本块的margin，外围的类为wrap的div明明将这个浮动块包在里边，但是网页上的border边框可以看出，高度的计算没有把它放在里边，浮动也跑到外边去了，因此浮动还要注意的是：如果要让B围绕A，且A浮动，在html代码的组织上，要把A模块的代码放在B模块之前，对于左或右均是如此。

 　　浮动可能产生的问题：

　　1.元素的border穿浮动块而过

　　代码和效果

<! DOCTYPE html >   < html >   < head >   < title > float test </ title >   < style  type ="text/css" > /* reset */  body,div,p,a,ul,li,h1,h2,h3,h4,h5,h6,pre,img margin : 0 ; padding : 0 ;  .wrap width : 400px ;  height : 100px ;  margin : 0 auto ;  border : 2px solid #3c3c3c ;    .wrap .banner  font-size : 120% ;  font-weight : normal ;    .wrap .banner  margin : 5px ;  border :  2px dashed #30c13a ; /* overflow:hidden; */    .wrap .fr  float : right ;  width : 100px ;  color : #fff ;  margin-left : 10px ; margin-right : 10px ;  background-color : #c19132 ;     </ style >   </ head >   < body >   < div  class ="wrap" > < div  class ="fr" >   < ul >   < li > Apple </ li >   < li > Google </ li >   < li > Microsoft </ li >   </ ul >   </ div >   < h1 class ="banner" >  Welcome To CSS World  </ h1 >   </ div >   </ body >   </ html >   View Code

　　效果     

　　添加overflow后

　　右上角，标题的边框穿过了浮动的列表，为消除这种因背景色或边框在浮动元素的下方出现的情形，需要使用overflow，我们知道overflow是文本溢出时采取的措施，比如hidden隐藏多出宽高范围的文本。具体说是，在.wrap .banner...中添加overflow:hidden即可，IE6可能还要加一个zoom:1;（这是一个神奇的IE属性，解决了好多IE显示问题~）

　　2. 在浮动元素周围环绕，但不需要

　　代码和效果

<! DOCTYPE html >   < html >   < head >   < title > float test </ title >   < style  type ="text/css" > /* reset */  body,div,p,a,ul,li,h1,h2,h3,h4,h5,h6,pre,img margin : 0 4浮动与定位

3.浮动与定位

H5浮动与定位

前端基础学习浮动与定位

浮动与定位

前端基础学习浮动与定位