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. unicode编码、字符的转换和得到汉字的区位码

    一:unicode编码.字符的转换截图 二:unicode编码.字符的转换代码 using System; using System.Collections.Generic; using System ...

  2. Android 开机自启动

    首先实现开机自启动: 第一步创建一个广播接收者,如MyBootBroadcastReceiver.java package com.example; import android.content.Br ...

  3. Spring Boot 启动原理分析

    https://yq.aliyun.com/articles/6056 转 在spring boot里,很吸引人的一个特性是可以直接把应用打包成为一个jar/war,然后这个jar/war是可以直接启 ...

  4. linux 发邮件

      一. centos yum 安装 1. yum install mailx vim  /etc/nail.rc 添加网易163邮箱开放的需要认证的smtp服务器: set from=USER@16 ...

  5. Python进程、线程、协程详解

    进程与线程的历史 我们都知道计算机是由硬件和软件组成的.硬件中的CPU是计算机的核心,它承担计算机的所有任务. 操作系统是运行在硬件之上的软件,是计算机的管理者,它负责资源的管理和分配.任务的调度. ...

  6. C primer plus 读书笔记第十一章

    本章标题是字符串和字符串函数.主要是了解和字符串有关的函数. 1.字符串表示和字符串I/O 主要内容:字符串常量和字符串数组的初始化,对比了指针和字符串. 其中要注意的是,数组初始化是从静态存储区把一 ...

  7. Android URI简单介绍

    就Android平台而言,URI主要分三个部分:scheme, authority and path.当中authority又分为host和port.格式例如以下: scheme://host:por ...

  8. [转] linux新的API signalfd、timerfd、eventfd使用说明

    http://blog.csdn.net/gdutliuyun827/article/details/8460417 三种新的fd加入linux内核的的版本: signalfd:2.6.22 time ...

  9. 关于 iOS socket 都在这里了

    socket(套接字)是通信的基石,是支持TCP/IP协议的网络通信的基本操作单元,包含进行网络通信必须的五种信息:连接使用的协议,本地主机的IP地址,本地进程的协议端口,远地主机的IP地址,远地进程 ...

  10. Log4j使用教程 （转载http://www.codeceo.com/article/log4j-usage.html）

    日志是应用软件中不可缺少的部分,Apache的开源项目log4j是一个功能强大的日志组件,提供方便的日志记录.在apache网站:jakarta.apache.org/log4j 可以免费下载到Log ...