子div元素为float时如何撑开父元素
2016-02-26 11:18
323 查看
方法一:
该方法关键在于用clear:both清除了浮动元素,把父元素parent撑开了
该方法的重点在于,子元素有float后,父元素需要设置一个overflow:hidden;,这样就可以撑开父元素
该方法关键在于用clear:both清除了浮动元素,把父元素parent撑开了
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> <style type="text/css"> .parent{ border: 1px solid red; } .child1{ float: left;width:200px; } .child2{ float:left;width:200px; } </style> </head> <body> <div class="parent"> <div class="child1">2</div> <div class="child2">3</div> <div style="clear: both;"></div> </div> </body> </html>方法二:
该方法的重点在于,子元素有float后,父元素需要设置一个overflow:hidden;,这样就可以撑开父元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> <style type="text/css"> .parent{ border: 1px solid red; overflow: hidden; } .child1{ float: left;width:200px; } .child2{ float:left;width:200px; } </style> </head> <body> <div class="parent"> <div class="child1">2</div> <div class="child2">3</div> </div> </body> </html>
相关文章推荐
- php六种基础算法:冒泡,选择,插入,快速,归并和希尔排序法
- 菜鸟nginx源代码剖析 配置与部署篇(一) 手把手实现nginx "I love you"
- 利用java给网站图片打上文本或图片logo
- Android Studio创建库项目及引用
- C#中方法、类等的默认访问修饰符~
- 慕课网----大话PHP设计模式 五(原型模式,装饰器模式,迭代器模式,代理模式)
- River Hopscotch(二分最大值)
- 面试前要准备一些什么?
- Android酷炫实用的开源框架(UI框架)
- Linux 3.10完全无滴嗒特性详解
- Shader编程笔记(二)<新手入门> 固定管线Shader
- Linux常用命令及使用技巧
- 十大技巧快速提升原生APP开发性能
- IOS UIKit性能优化实战
- Android studio如何使用SVN进行版本控制?
- mp4文件格式解析(一)
- 通过a连接下载服务器上的pdf文件
- 【MySQL】——发生系统错误2
- Pomelo 新手周计划(二)
- LinearLayout建立多个控件却只显示第一个