1、浮动布局，定位细节。想让页面放多块东西，那就是浮动。浮动可以让元素水平排列。浮动的时候，各个元素的高度不等时，会出现卡主的现象，尽量设置高度相等。
2、浮动元素脱离文档流，浮动和浮动元素，浮动和普通元素，浮动元素碰到父容器边缘会停止，碰到另一个浮动元素也会停止，碰到普通元素，比如文字。文字会环绕浮动元素周围，从左往右，放不下的时候换行，继续。
3、右浮动的时候，样式跟代码会恰好相反，如下
这样样式下，一般外面包括一个父容器即可，父容器右浮动，里面的元素做浮动，看着就正常了。
4、浮动清除
clear：left清除该元素的左边没有浮动元素
clear：right清除该元素的左边没有浮动元素
但是如果渲染第一个浮动元素，其右边就算有浮动元素，给第一个元素设置clear:right是没有作用的，html的渲染是从上倒下的，第一个元素设置清除浮动根本没有作用，没有右边元素就，不管用cleart什么都没有作用。想让谁跑到谁的左右或者上下，就对谁设置clear
如果以后的元素不用浮动，可设置空标签，clear：both,那么其父容器就会被撑开，后面的元素就会按照正常的文档流。正常情况下，盒模型的高度一般不设置，盒模型会自动设置，但是盒模型不会计算浮动元素进入高度。
凡是有用到浮动的元素。其父容器一定要包括，再设置clear:,也可用伪元素如下设置
块级元素一般不设置width:100%,会影响文档展示。元素设为浮动，绝对定位之后设置宽度：100%
浮动可将元素进行收缩，可设置33.33%之类。元素一旦加浮动后，元素直接变成块级元素，不用加display:block.可设置宽度高度内边距等
做一个简单的两栏布局，可以用float
三栏布局（渲染顺序很重要）
中间蓝色快是普通元素，未设置浮动，现在位置再中间是由于设置了margin
网友评论