园林网页制作实验css浮动

1、CSS浮动研究CSS Float块的正常布局使用浮动技术，让图片排在块的右边印刷品word排版CSS Float元素脱离文档流，浮在父元素div的右边(类似浮在文字上面)元素变成一个块框后继元素向上移动，形成了类似“包裹”图片的行动浮动原理展示浮动特性img float:right 红色边框是父元素的，蓝色边框是的firstFirst-浮动First-浮动原理First-浮动两个并排展示此例中没有设置浮动，而是将其margin-right:210pxvalue含义float:left元素浮动到父元素的左方float:right元素浮动到父元素的右方float:none元素不浮动（默认取值）fl

2、oat:inherit元素继承父元素的float属性取值CSS Float可设置给任意元素，但只适用于生成非绝对定位框的元素(1)任何HTML元素浮动后都将成为一个新的块级框，可以设置其区域大小，边框及边距浮动特点width:400px,height:100pxmargin:15pxCSS Float Research行内元素浮动后(缩小浏览器可以看到上图结果)行内元素变成块状元素的三种方法(2)没有设置大小的div设置浮动后,盒子的宽度不再伸展，而是收缩，根据盒子里面的内容的宽度来确定; 同时依据float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧浮动特点CSS

3、Float Research没有设置大小的div设置浮动后浮动细则CSS Float Research1.对于根元素的浮动，浏览器应该当作none浮动细则CSS Float Research2.左浮动框的左外边界(marginedge)不可以出现在它包含块左边界之左。对于右浮动的元素也有类似规则# son1 float:left;#son2 float:right;# son1 float:left;#son2 float:right; margin:-10px -20px;同上图一样，不过父元素设置为overflow:hidden;浮动细则CSS Float Research 3.如果当前框

4、是左浮动框，并且在源文档中存在更早生成的左浮动框，那么对于任意这些先前的框，要么当前框的左外边出现在先前框的右外边之右，要么它的顶部必须在先前框的底部之下。对于向右浮动的框也有类似的规则。 浮动元素的定位受先前生成的浮动框的影响。后面的浮动元素，需要紧挨着先前同向浮动元素的margin边进行定位，如果空间不足，则折行，放置到它之前元素的下面#son2宽度变大，到#son3的时候，剩余的空间已经不能够放置它了，所以，折行放置把#son2当作当前元素，它前面有#son1生成的浮动框，则它会贴着#son1的右margin边排列;#son3同理浮动细则CSS Float Research4.左浮动框的

5、右外边不可以出现在它右侧的任何右浮动框的左外边之右。对于向右浮动的元素也有类似的规则。 注意，以上说的是右侧，不是下侧，此规则不包括左浮动框下面的右浮动框。就是说，同一行中的左浮动元素和右浮动元素不能够有互相折叠的现象父元素有两个孩子，一个孩子左浮动；一个孩子右浮动父元素宽度足够时父元素宽度不足时浮动细则CSS Float Research5.（1）浮动框的顶外边不能高于它包含块的顶部。 （2）当一个浮动框发生在两个margin折叠的中间时，浮动元素的定位好像它有另一个空的块级父框位于常规流中。浮动规则浮动元素的外边缘不会超过其父元素的内边缘浮动元素不会互相重叠浮动元素不会上下浮动如果一个浮动元素在另一个浮动元素之后显示，而且会超出容纳块，则它下降到低于先前任何浮动元素的位置。说简单点就是没有空间的话，就另起一行。 Float Research浮动与绝对定位的区别绝对定位虽然也可以进行布局，但是它的特点决定了它不适合做页面的布局，因为被定义的元素在普通文档中占有的任何空间都将被关闭，可以说，它是漂浮在整个页面上面的，所以，它可以和页面上其他的内容重叠显示。Css layout清除浮动格式：clear:value;value含义left清除左浮动right清除右浮动