float 浮动布局:
带有 float 浮动属性的元素都会变成块级元素, 脱离文档流进行布局, 但是 float 元素依然占据正常文档流文本空间. CSS 三种布局方式: 标准流, 定位, 浮动. 浮动使得元素脱离了正常的标准流, 浮动的元素不在占有原始标准流中的空间, 会导致父元素无法检测子 (浮动) 元素的高度, 而产生父元素高度塌陷的问题. 浮动副作用 (父元素高度塌陷) 问题的解决: 1. 手动给父元素添加高度. 2. 通过 clear 清除内部和外部的浮动. clear 属性的四个参数: clear:none,clear:left 不允许左边有浮动的对象, clear:right 不允许右边有浮动的对象, clear:both 不允许有浮动的对象. 3, 给父元素添加 overfloat 属性并结合 zoom:1 使用. overflow 是用来处理溢出问题的. overflow:hidden 会截取超出父元素之外的元素, 使其不可见. zoom:1 是 ie 专用的一个属性, 通过子元素的总体高度来放大缩小父元素的高度, 导致父元素拥有了高度. 4, 给父元素添加浮动.
----------------------------------------------------------------------
CSS 中的 position:
CSS 三种布局方式: 标准流: 网页中默认的布局方式, 即顺序布局. html 元素可以分为两大类: 块级元素 (div,h1...h6,ol,ul,li,table,p 段落等) 和内联元素(a 超链接, span 文字, img 图片, input 控件). 块级元素总是独占一行, 内联元素是和相邻的内联元素在同一行, 如果一行内宽度不够时, 才被挤到另一行上去.; 定位: position 定位属性通过改变正常的标准流, 以非正常的方式迫使元素脱离标准流. position 属性决定了元素如何进行定位, 通过 top,right,bottom,left 实现位置的改变. position 中有 5 个可选的参数: static: 默认值, 元素按照标准流的方式进行正常的排列,,relative 是指相对定位, 使用了 position:relative 的元素任然处于正常的文档流中, 可以通过 top,right,bottom,left 来改变元素的位置,,absolute,fixed,inherit.; 浮动.
float 浮动布局(慕课网 CSS 笔记)
来源: http://www.bubuko.com/infodetail-2717441.html