首页 > 代码库 > css---浮动
css---浮动
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title></title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css"> --> </head> <style style="text/css"> body{ font-size: 16px; } #left{ width: 50px; height: 50px; background-color: red;float: left; } #right{ width: 200px; height: 200px; background-color: green; float: right; } #foot{ width: 100px; height: 100px; background-color: blue; } .aa:HOVER{ -webkit-transition:border linear .2s,-webkit-box-shadow linear .5s; border-color:rgba(141,39,142,.75); -webkit-box-shadow:0 0 18px rgba(111,1,32,3); } .aa{ height: 100px;width: 100px; } </style> <body> <div style="border: 1px solid red; width: 300px;"> <div id="left">left</div> <div id="right">right</div> <br clear="all" /> <!-- 相当于 <div style="clear:both"></div> --> </div> <div id="foot">foot</div> This is my JSP page. <br> <input type="text" class="aa"> </body></html>
1.左右居中： 让居中的元素： margin : xxxpx auto;（在外套的div中居中）
2.浮动： 相当于就是脱离了出来，其后的元素当做其不存在即可。
3.浮动布局，在同一个div中的元素，全部浮动即可。
4.浮动是基于最外围的 第一个 absolute 绝对定位的元素来说的， body貌似默认绝对定位。
5.浮动会对后面的东西有影响，而且浮动好像会自动上移给上层div，影响其父层。 此时如果希望下方元素不受其影响，
仍按照以前的顺序方式进行排列，此时需要去掉前面对象的浮动：也就是清除浮动。
clear: none / left / right /
<br clear="all" /> <!-- 相当于 <div style="clear:both"></div> -->
6.浮动： 先浮后动：先飘离原来的位置，后动：其后面的元素会向它原来的位置上，动起来。
7.还有一个问题：当浏览器窗口变小时： 浮动本来在同一行时，窗口变小放不下，此时会变为多行！！
解决：在外围套一个div，并定义外围div的宽度。
绝对定位：
1.absolute绝对定位：将对象也从文档流中分离出来，通过设置left、right、top、bottom四个方向相对于父级对象进行
绝对定位。
·当我们要使用绝对定位时：
必须满必须给父元素加定位属性、一般建议为relative；
给子元素，加绝对定位，同时设置top、right（或者：left、bottom）
·如果不存在这样的父对象，则依据body对象。（位置也会空出来。）（一般都是把页面最后面的东西，定位到
页面前面某个位置。）
2.relative相对定位：
对象不从文档流中分离，通过设置left、right、top、bottom四个方向相对于自身位置进行相对定
位。——这里注意，其仍占有以前的位置
css---浮动