css设计指南-笔记4
2016-02-20 22:42
615 查看
围住浮动元素的三种方法
如下例(效果图在底面)<section> <img src="images/rubber_duck.jpg"> <p>It's fun to float.</p> </section> <footer>Here is the footer element that runs across the bottom of the page. </footer>
1. 为父元素添加overflow:hidden
section {overflow:hidden;} img {float:left;} //此处的overflow:hidden强迫父元素包含浮动的元素
2. 同时浮动父元素
section {float:left; width:100%;} //width:100%使section与浏览器容器同宽 img {float:left;} footer {clear:both;}
3. 添加非浮动的清除元素
在父元素内容的末尾添加非浮动元素
可以直接在标记中添加,也可以通过给父元素添加类来添加
//section结束标签前加<div class="div1"></div> img {float:left;} .div1 {clear:left;} //给section添加一个clearfix类 .clearfix::after { content: ""; height: 0; visibility: hidden; display: block; clear: both; }
相关文章推荐
- NEC 框架规范 css reset
- HTML+CSS学习笔记(2) - 认识标签(1)
- HTML+CSS学习笔记(1) - Html介绍
- CSS padding margin输入不同值个数的效果详解
- 第十三章 用户界面样式
- css中的块级和内联元素
- css中的百分比计算方法
- 恶补CSS的布局知识
- CSS样式笔记_背景文本字体链接
- 【css】display与position
- css清除浮动大全
- css3 animation 中的 steps
- Css 选择器总结
- CSS基础笔记
- 7个CSS单位
- CSS sprite注意事项
- CSS 设置导航菜单文字内容垂直居中
- CSS部分要点
- PHP判断客户端是手机还是电脑自动调用加载对应的CSS样式
- 清除浮动的几种方式