一、浮动布局
浮动可以解决的问题:
- 浮动可以解决文字包围图片的问题。
- 浮动可以解决莫名奇妙的间隔问题。
- 浮动可以向左,向右进行排版对齐。
注意:浮动设置元素,脱离正常的文档流,向左或向右,靠近父元素的边缘或者设置了浮动的其他的元素的边缘靠拢。
(1)浮动可以解决文字包围图片的问题
还没使用浮动布局前
使用浮动布局向左浮动后
解决文字包围图片问题
(2)浮动可以解决莫名奇妙的间隔问题。
父元素为300px,子元素为100px(被设为行块元素),不能放置有一行中。
解决方法一:
删除子元素代码间的空格
解决方法二:
浮动布局float
解决方法三:
把字体大小设为0
3. 浮动可以向左,向右进行排版对齐。
二、清楚浮动
浮动的高度塌陷问题!
例子:把父元素的高度取消了后(子元素高度不变),父元素就没有高度了。原因是子元素脱离了文档流,副元素找不到子元素,副元素以为自己没有孩子了。
解决方案:
1、设定副元素高度;
2、创建div,用清除浮动的方法让它重新计算自己有没有子元素。(是万能的,一定能解决但不够理想)
3.最佳解决方案: 伪元素清除浮动。
不想设置高度,默认用子元素撑开副元素的高度(例如新闻),就要用到清楚浮动。
(2)创建div清除浮动
(3)伪元素清除浮动
写一个清除浮动的类,要用时加在父元素类名后面