爱创课堂每日一题第四十五天-解释下浮动和它的工作原理?清除浮动的技巧?
2017-11-02 09:30
316 查看
浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
1.使用空标签清除浮动。
这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
2.使用overflow。
给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
3.使用after伪对象清除浮动。
该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0,否则该元素会比实际高出若干像素;
1.使用空标签清除浮动。
这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
2.使用overflow。
给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
3.使用after伪对象清除浮动。
该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0,否则该元素会比实际高出若干像素;
相关文章推荐
- 爱创课堂每日一题第四十七天- 清除浮动的几种方法?
- 爱创课堂每日一题第三十二天-谈谈浮动和清除浮动?
- 解释下浮动和它的工作原理?清除浮动的技巧
- 爱创课堂每日一题第四十六天- 浮动元素引起的问题和解决办法?
- 爱创课堂每日一题第二十八天你觉得jQuery或zepto源码有哪些写的好的地方?
- 爱创课堂每日一题第二十一天-移动端性能优化?
- 爱创课堂每日一题第三十六天- 请你谈谈Cookie的弊端?
- 爱创课堂每日一题第四十九天- 什么是 FOUC(无样式内容闪烁)?你如何来避免 FOUC?
- 浮动的工作原理及清除浮动的技巧
- 爱创课堂每日一题第二十天- 谈谈性能优化问题?
- 爱创课堂每日一题第二十七天-2017/9/29 快速 排序的思想并实现一个快排?
- 爱创课堂每日一题第三十四天-用过哪些设计模式?
- 爱创课堂每日一题第四十二天- 你知道多少种Doctype文档类型?
- 爱创课堂每日一题第二十六天-2017/9/28 栈和堆的区别?
- 爱创课堂每日一题七十六天- 请解释什么是事件代理?
- 爱创课堂每日一题第三十九天- cookie 和session 的区别?
- 爱创课堂每日一题第四十天- 说说你对语义化的理解?
- 爱创课堂每日一题第三十七天- 浏览器本地存储?
- 爱创课堂每日一题第四天8/28日XML和JSON的区别?
- 爱创课堂每日一题第三十八天-web storage和cookie的区别?