发表于: 2018-07-17 11:47:44
1 717
今天完成的事情: 总结代码规范,复习css基础知识;
明天计划的事情:进行任务7
遇到的问题:更深入的了解一下css,明白为何这么用;
收获:
清除浮动的方法?
1. 在父级div上定义height
- .outer{
- height:150px;
- }
不建议使用这种方法,因为这种方法只适合在高度固定的情况下使用,其他情况并不适用。
2. 在结尾处添加新的标签 clear:both
- .clearfix{
- clear:both;
- }
- <div class="outer">
- <div class="left">Left</div>
- <div class="right">Right</div>
- <div class="clearfix"></div>
- </div>
不推荐使用,使用多余的标签,会造成页面太过冗余。
3. 父级div定义:after伪类和zoom
- .outer:after{
- content:"";
- display:block;
- height:0;
- overflow:hidden;
- clear:both;
- }
- .outer{
- zoom:1;/*兼容IE浏览器*/
- }
多数网站用,推荐使用这种方法。
4. 父级div定义overflow:hidden
- .outer{
- overflow:hidden;
- zoom:1;/*兼容IE浏览器*/
- }
不推荐使用这种方法。超出可视范围的内容将会被隐藏。
这种方法的原理是将父级元素变成BFC(块级格式化上下文)
5. 父级div一起浮动
- .outer{
- float:left;
- }
不推荐使用,可能会造成新的浮动问题。
评论