浮动与定位在网页设计中应用得很广泛，是两种主要布局方式的实现方法。
我们知道，网页上一般来说，块标签是自上而下的一块块堆叠，行内标签则在一行内从左到右依次并排，如果所有网页的都这样机械的排列着，也太单调了，所以有没有一个东西让标签内容脱离这种文档流呢，首先就可以考虑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>效果
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>效果
就是将上例中的浮动模块和右边的文本模块调换了位置，去掉了右边文本块的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>效果
添加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;padding:0;} .wrap{ width:400px; height:136px; margin:0 auto; border:2px solid #3c3c3c; } .wrap .left-sidebar{ width:100px; background-color:#e0c898; text-align:center; float:left; } .wrap .left-sidebar ul{list-style-type:none;} .wrap .main{ margin-left:110px; } .wrap .copyright{ background-color: #000; color:#fff; padding:5px; text-align: center; } </style> </head> <body> <div class="wrap"> <div class="left-sidebar"> <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> <li>F</li> </ul> </div> <div class="main"> <p> The Macintosh Classic is a personal computer that was manufactured by Apple Computer from October 15, 1990 to September 14, 1992. </p> </div> <div class="copyright"> <p>Copyright 1996-2015. Some Inc.</p> </div> </div> </body></html>效果
clear清除包围后
有的网站可能是这样的，左边一个类似于导航条的东西，浮在浏览器左边，右边是主要文本内容，假如这个导航条高度比较高，而右边的文本又不多，所以本该放在页底的版权声明跑到文本内容下边，导航条右边了。如何解决？就要使用clear属性，有三个值：left、right、both。比如clear:left，就是在告诉浏览器，我不会包围左浮动的元素，如果是both，则是不包围左或者右浮动的元素，一般版权声明始终在页底，所以我们可以在版权的代码（.wrap .copyright{..}）上加上clear:both，效果如右图（在这里只需要clear left就行）。
定位，源于网页设计者想控制网页上的元素的位置，使它们能放在任何地方，假如你在博客园看某人的博客，比如我这个模板（ThinkInside），会发现顶部导航栏总是悬浮在顶部，即便向下滚动网页，这就是定位的很好体现。使用Chrome查看它的代码可以找到这样的
使用了position属性，值为fixed，即固定，规定了left、right和top属性，离左边、右边和顶部的距离，就完成了定位（其实还与父元素的position属性有关）。
网页设计经常遇到像logo放在哪儿，文字如何放到图片上等，这就是如何以及在何处显示特定的元素的问题，解决它的属性---position，一个精确的定位离不开设置它的left、top等属性。
position有四个属性值：absolute（绝对定位）、relative（相对定位）、fixed（固定定位）、static（静态定位）。
首先，静态定位是position的默认值，即跟随html文档流的排列形式，没有进行定位，它忽略给出的left、right、top、bottom值，以及z-index（如果把网页看做是水平的，它就是在竖直方向上的值，即所谓的“层”，层越高（z-index值越大）就越被摆放在网页的外面，里面的层就被覆盖掉了）。
绝对定位，通过设置它距离父元素的左、右、上或下的距离，它甚至可以脱离页面文档流。前面介绍float时，我们看到标题的边框线穿过了浮动的元素底部，就是由于浮动元素不再是html文档流，所以其他元素不知道它的存在，对于绝对定位也有可能面临这种情况，所以绝对定位的元素可以覆盖网页上其他的元素，它被摆在外面。
如果使用了绝对定位，而它的父元素里边没有将position属性设置成absolute或者relative的话，它一定是相对于浏览器的边沿进行定位的，即你设置的left距离左边界多远，完全是相对于浏览器的边界的，必须清楚这一点。举例
<!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:760px; height:630px; margin:0 auto; border:2px solid #c19132; } .wrap .piece{ width:100px; height:60px; background-color:#0092ff; position:absolute; right:0; } </style> </head> <body> <div class="wrap"> <div class="piece"> </div> </div> </body></html>效果
从代码中可以看到，即便类名为piece的div就放在类名为wrap的div中，不出意外它至少也要挨着那个边框线，但是现在给了它position绝对定位，让它距离右边距（right）为0，它却跟浏览器边沿挨着了。
相对定位，如果A元素设置了相对定位属性（position:relative），B是A里面的子元素，现在要对B进行定位，B将以谁为参照进行定位呢，答案是A。相对定位就是在告诉它里面的子元素：如果你们使用position进行位置控制的话，请以我当前的位置为标准。如果你设置了position:absolute和left：10px，top:5px，那是在距离我（A）的左边界10像素，上边界5像素来摆放你。所以相对定位作用的对象是它的子元素，而且它的子元素也要设置position为absolute，否则子元素的left，right等的属性没意义。
固定定位，就像定位属性开始说的，有时候让导航一直悬在那里是为了方便用户，还有比如为了强化公司品牌，将logo一直固定在右上角，也可以这样干。它与设置背景图片background-attachment设为fixed时作用一样，前者是将背景图片固定，用户滚动网页时背景图片跟着滚动。固定定位IE6不支持，用IEtest打开博客看顶部就可以看到奇葩效果。
重点：除了静态定位和相对定位，不能将float属性与其他的定位方式同时应用于同一元素。
所以现在，请把一张小图放在一张大图上，即所谓的飘浮，就很好办了。首先，我们需要的不是相对于浏览器边沿定位，而是放在某个元素中，因为要相对于大图放置，所以是相对定位，直接用img标签不能达到效果
<img src="大图" /> <img src="小图" />
因img是自开自闭标签，相对定位属性是对子元素起作用，难道把一个img放在另一个img里面？当然不行，方法就是在两个img外面加个div包起来，使小图相对于这个父元素div来定位。代码
<!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;} .pt{ /*父元素设置相对定位，使子元素相对于它偏移*/ position:relative; } .pt .smallimg{ /*子元素相对于父元素绝对定位*/ position:absolute; top: 30px; left:60px; } </style> </head> <body> <div class="pt"> <!-- 大图 --> <img src="./image/blue.png" /> <!-- 小图 --> <img class="smallimg" src="./image/doraemon.png" /> </div> </body></html>效果
其他的文字飘浮、什么定位差不多同一个道理，如果想对定位元素相互覆盖的话，设置一个z-index属性，越大的就会越在网页表面，从而拒绝被覆盖。
需要注意的是，与定位相关的left、right、top、bottom属性都可以给负值，可以制造成它们像悬在某一个块的边界上那样的效果，一半在里面，一半在外面。
OK，既然浮动与定位都可以使图片、文本等元素位移，假如让一个大的div位移呢？这就牵涉到网页的布局设计了。很多个人网站，比如某些博客，是经典的三栏设计
页面设计 代码顺序
banner里边放logo，昵称，签名 or whatever，左边放导航，右边放说明，主要内容展示在中间（随便说的），底下再标识版权（记得clear both）。有两种可选的方案是：
最初、左側のサイドバー: 左側にフロート、右側のサイドバーが右側にフロート、メインが margin-left と margin-right を設定します。2 番目、左側のサイドバーとメインのフロートが左側に、右側のサイドバーが右側にフロートします。 、そしてもちろんメイン マージンを設定する必要があります。 floatを使用した一部のレイアウトは「フローデザイン」と呼ばれます。通常、ラップ全体は 960px などの固定幅で中央に配置され、その中の div はフロート表示されます。 HTML コードの順序は基本的にレイアウトと同期しています (上右図) 注意 float ブロックは、周囲のブロックの前に配置する必要があります。
すべてが完了したら、 @media を使用してさまざまな画面サイズに適応させるだけで、基本的に（IEを考慮しない場合）使用できる状態になります（簡単に言うと、方法がわかりません）それを行うには =_=#) 。
固定幅デザインというデザインもありますが、画面がどんなに大きくても、最初に大小のブロックをすべて分割して固定幅にした方が楽です。ページのデザインとコードシーケンスは上記と同じです。
ボックスモデルで何と言われたか覚えていますか？ CSS の一部のプロパティには、margin や left など、負の値を指定できます。十分な負の値を指定すると、その前の要素を「スキップ」してその前で実行でき、Web ページを最適化するときに非常に便利で、Web ページのコンテンツをより多く検索エンジンに公開できます。立場が明確になったら、それを実行することができます。上記と同じページデザインですが、そのコードシーケンスは次のようになります
メインのメインコンテンツが前面にある場合、ドキュメントに従って直接流れると、上記のページデザインの効果が得られないため、次のようになります。 give left-sidebar left に負の値を与えます。 #main のボックス モデルの幅が 480px であると仮定します。これは、左/右パディング + 左/右ボーダー + 左の合計を含む必要があることに注意してください。 /right マージンと幅、および #left を指定します -sidebar は絶対位置を使用し、左の値は幅の値の負の数に与えられるため、ページ上の #main の左側、および #main ブロックに表示されます。 # 左サイドバーのオーバーレイによるオフセットを避ける必要があるため、マージン左の値が与えられます (#左サイドバーは、絶対配置を使用した後にドキュメント フローから分離されます)。この値は # 全体のボックス モデルの幅です。左側のサイドバー div、またはそれらの間のエッジを明確にするために少し大きくします。これは大きな div 全体の配置です。
フローティングと同じ効果は、ポジショニングによって達成できます。それは、自分自身を拷問したいかどうかによって異なります。
これを理解すると、PMがスタイルを変更したり、UIお姉さんが勝手にサイズを変更したりする心配がなくなりました。スタイルについては何も知りませんが、毎回、
「またページが変更されたようですね？」 「はい、PM が変更したと言っています」 「...」
「なぜそうなったのですか？」 「またサイズ変更したんですか？調整したところです。わかりました」「こうやってカットしたほうが見栄えが良くなるのではないかと思いました」「Q_Q...」
幸いなことに、ページはシンプルで、テンプレートもあります。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
