html:

<body>
<div class="main">
<div class="first"></div>
<div class="second"></div>

</div>
</body>

<style>
.main
{
overflow:hidden;
border:1px solid black;
}
.first{
width:100px;
height:100px;
float:left;
background:#33ffff;
}
.second
{
float:left;
width:300px;
height:300px;
background:#9900ff;

}
.clear
{
clear:both;
}
</style>

1:将main父级div增加高度

2：增加<div class="clear"></div>

3:将父级div增加：overflow:hidden

清除div浮动的三种方式的更多相关文章

  1. css中的浮动与三种清除浮动的方法

    说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...

  2. 【css】清除浮动的几种方式

    [css]清除浮动的几种方式   因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid bla ...

  3. HTML连载49-清除浮动的第三种方式（内外墙法）

    一.清除浮动的第三种方式 1.隔墙法有两种​如下:外墙法和内墙法​.​ 2.外墙法 (1)在两个盒子中间添加一个额外的块级元素 (2)给这个额外添加的块级元素设置:clear:both;属性 注意点: ...

  4. css考核点整理（一）-浮动的理解和清除浮动的几种方式

    浮动的理解和清除浮动的几种方式 clear语法:clear : none | left | right | both 取值:none : 默认值.允许两边都可以有浮动对象left : 不允许左边有浮动 ...

  5. HTML5实现动画三种方式

    编者注:作者以一个运动的小车为例子,讲述了三种实现HTML5动画的方式,思路清晰,动画不仅仅是canvas,还有css3和javascript.通过合理的选择,来实现最优的实现. PS:由于显卡.录制 ...

  6. python 全栈开发，Day94(Promise,箭头函数,Django REST framework,生成json数据三种方式,serializers,Postman使用,外部python脚本调用django)

    昨日内容回顾 1. 内容回顾 1. VueX VueX分三部分 1. state 2. mutations 3. actions 存放数据 修改数据的唯一方式 异步操作 修改state中数据的步骤: ...

  7. CSS控制样式的三种方式优先级对比验证

    入职已经一个月了,自此后,就好久没有写过博客了,在此先跟关注我的博友们说声抱歉.今天,在公司的一个培训作业的驱动以及伟哥那句“再不写博客就开除你”的监督下,我终于重拾旧爱,再次登录博客园,继续与大家分 ...

  8. 使用javascript实现在页面打印的效果的三种方式

    <div id="console"></div> <script type="text/javascript"> var c ...

  9. js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理

    动态创建元素的三种方式: 第一种: Document.write(); <body> <input type="button" id="btn" ...

随机推荐

  1. 数据结构（线段树）：NOI 2016 区间

    [问题描述] [输入格式] [输出格式] [样例输入] 6 3 3 5 1 2 3 4 2 2 1 5 1 4 [样例输出] 2 [样例说明] [更多样例] 下载 [样例 2 输入输出] 见目录下的 ...

  2. 【模拟】NEERC15 G Generators(2015-2016 ACM-ICPC)(Codeforces GYM 100851)

    题目链接: http://codeforces.com/gym/100851 题目大意: n个序列.每个序列有4个值x,a,b,c,之后按照x=(a*x+b)%c扩展无穷项. 求每个序列各取一个数之后 ...

  3. TabHost结合RadioButton实现主页的导航效果

    布局文件的设置,如下 <?xml version="1.0" encoding="utf-8"?> <TabHost xmlns:androi ...

  4. 迭代加深搜索算法总结 + Editing a Book UVa11212题解

    迭代加深搜索算法: 对于可以用回溯法解决,但是解答树结点数大的恐怖的问题的一种解决办法,有的问题甚至用bfs连一层节点都遍历不完就超时了.具体方法就是依次枚举搜索层数,从1到一个上限. 结构: int ...

  5. poj1323

    题目大意: 预测游戏 假如有MR人,包括你自己,玩一个特殊的卡片游戏,开始的时候,没有参与者接收到N张卡片,这pip卡片是一个正整数最少M*N,没有两张pip卡片是一样的,在一圈后,每个玩家选择一张卡 ...

  6. 什么是ARC

    arc就是自动引用计算.英文名Automatic Reference Counting.在一开始的IOS开发中,内存管理是需要手动的,对某个资源的引用,引用后就对其计算+1,当不再使用就-1,当计算为 ...

  7. Java 判断一段网络资源是否存在

    package cn.ycmedia.common.utils; import java.io.InputStream; import java.net.URL; import java.net.UR ...

  8. HDU1700：Points on Cycle

    Problem Description There is a cycle with its center on the origin. Now give you a point on the cycl ...

  9. 你好，C++（12）怎样管理多个类型同样性质同样的数据？3.6 数组

    3.6  数组 学过前面的基本数据类型之后,我们如今能够定义单个变量来表示单个的数据.比如,我们能够用int类型定义变量来表示公交车的216路:能够用float类型定义变量来表示西红柿3.5元一斤. ...

  10. oracle暂时表空间 ORA-01652:无法通过16（在表空间XXX中）扩展 temp 字段

    今天在查数据的时候报错  ORA-01652:无法通过16(在表空间temp1中)扩展 temp 字段 查看表空间使用明细 SELECT b.tablespace,        b.segfile# ...