围住浮动元素的三种方法
2015-06-20 13:40
671 查看
当有浮动元素时:
有三种方法可以解决这个问题:
为父元素添加overflow:hidden
同时浮动父元素
添加非浮动的清除元素
如果不想添加这个纯表现型元素,我再告诉你一个用css来添加这个清除元素的方法。首先给section添加一个类
<section> <img src="images/rubber_duck2.jpg"> <p>It's fun to float.</p> </section> <footer> Here is the footer element that runs across the bottom of the page.</footer>
section {border:1px solid blue; margin:0 0 10px 0;} img {float:left;} footer {border:1px solid red;}
有三种方法可以解决这个问题:
为父元素添加overflow:hidden
section {border:1px solid blue; margin:0 0 10px 0; overflow:hidden;} img {float:left;} p {border:1px solid red;}
同时浮动父元素
section {border:1px solid blue; float:left; width:100%;} img {float:left;} footer {border:1px solid red; clear:left;}
添加非浮动的清除元素
<section> <img src="images/rubber_duck.jpg"> <p>It's fun to float.</p> <div class="clear_me"></div> </section> <footer> Here is the footer element…</footer>
section {border:1px solid blue;} img {float:left;} .clear_me {clear:left;} footer {border:1px solid red;}
如果不想添加这个纯表现型元素,我再告诉你一个用css来添加这个清除元素的方法。首先给section添加一个类
<section class="clearfix"> <img src="images/rubber_duck.jpg"> <p>It's fun to float.</p> </section> <footer> Here is the footer element…</footer>
.clearfix:after { content:"."; display:block; height:0; visibility:hidden; clear:both; }
相关文章推荐
- 暂时不更新博客
- jxta-P2P学习
- LeetCode之“散列表”:Two Sum && 3Sum && 3Sum Closest && 4Sum
- CF E. Vanya and Brackets(添加一对括号使得表达式的值最大)
- Java串口通信详细解释
- java产生任意范围内不重复的随机数
- Codeforces Round #260 (Div. 1) C. Civilization 并查集,直径
- 黑马程序员--java学习笔记第七天
- VS中的活动debug和活动cpu
- leetcode--Roman to Integer
- Explicit keyword
- 【安德鲁斯】基于脚本的数据库"增量更新",如果不改变,每次更新java代码、!
- Spring中的AOP简述
- win7硬盘安装ubuntu双系统的方法
- 游戏有这么好玩么?
- USACO——Milking Cows 挤牛奶
- 如何在 Ubuntu/Debian/Linux Mint 中编译和安装 wxWidgets
- JavaScript里call,apply,bind方法简介
- FZU 2192 位置信息挖掘 (种类并查集)
- EditPlus保存时不生成bak文件(转)