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. （转载）PHP怎么获取MySQL执行sql语句的查询时间

    (转载自CSDN) 方法一: //计时开始 runtime(); //执行查询 mysql_query($sql); //计时结束. echo runtime(1); //计时函数 function ...

  2. 杂题 SPOJ MOBILE2 - Mobiles

    MOBILE2 - Mobiles no tags  You have been asked to buy a gift for your baby brother, Ike. However, yo ...

  3. 【模拟】Codeforces 699B One Bomb

    题目链接: http://codeforces.com/problemset/problem/699/B 题目大意: N*M的图,*代表墙.代表空地.问能否在任意位置(可以是墙上)放一枚炸弹(能炸所在 ...

  4. excel时会弹出向程序发送命令时出现问题的提示框

    出现此问题需要做两个操作来解决: 1.在开始所有程序中找到Microsoft Excel 2007的运行程序,右键选择属性,在兼容性标签将“以管理员身份运行此程序”的勾去掉. 2.在打开的Excel程 ...

  5. 新的一年新的气象 云计算与SOA

    ［David S.Linthicum］著 云计算和SOA是不同的概念,但是它们却相互联系.SOA是架构模式,而云计算是架构的实例,或者说是架构的一种选择,SOA更具整体性和战略性,它解决的是包括业务驱 ...

  6. jsp中的contentType与pageEncoding的区别和作用

    jsp中的contentType与pageEncoding的区别和作用   <%@ page contentType="text/html; charset=utf-8" p ...

  7. 301重定向与CNAME

    CNAME记录是域名指向另一个域名A记录是域名指向IP地址URL跳转是打开这个网址的时候会跳转到另一个指定的网址,URL跳转分为301永久重定向和302临时重定向. 301永久重定向会使搜索引擎抓取新 ...

  8. lyGrid表格插件

     表格基础参数: grid = lyGrid({           l_column : [{//表格列表数据                 colkey : null,              ...

  9. 谈谈C#中的接口

    接口的相关陈述 1．一个接口定义了一个契约. 2．接口可以包容方法.C#属性.事件.以及索引器. 3．在一个接口声明中,我们可以声明零个或者多个成员. 4．所有接口成员的默认访问类型都是public. ...

  10. centos下的mysql安装

    卸载mysql yum remove mysql mysql-server mysql-libs compat-mysql51 rm -rf /var/lib/mysql rm /etc/my.cnf ...