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正则表达式清除字符串的空白

    (转载)http://www.chinaz.com/program/2009/0220/67569.shtml 我们经常会处理来自用户输入或从数据库中读取的数据,可能在你的字符串中有多余的空白或制表符 ...

  2. 数学计数原理（Pólya）：POJ 1286 Necklace of Beads

    Necklace of Beads Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 7763   Accepted: 3247 ...

  3. 字符串（广义后缀自动机）：BZOJ 3926 [Zjoi2015]诸神眷顾的幻想乡

    3926: [Zjoi2015]诸神眷顾的幻想乡 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 843  Solved: 510[Submit][St ...

  4. kafka在zookeeper中的存储结构

    参考site:http://kafka.apache.org/documentation.html#impl_zookeeper 1.zookeeper客户端相关命令 在确保zookeeper服务启动 ...

  5. SRM 393(1-250pt)

    题意:有m个人投票,每个人在心里对所有候选者排了一个序,比如“210”,则他最想投2号,如果2号已经出局他会投1号,最后投0号,否则弃权不投.选举时进行多轮投票,知道选出winner或者所有人均出局. ...

  6. u盘启动openwrt

    opkg update opkg install kmod-usb-ohci kmod-usb2 kmod-fs-ext3 opkg install kmod-usb-storage reboot m ...

  7. Jinja2模版语言自定义filter的使用

    Jinja2模版语言,自带有一些filter,能够在前端的模版中控制数据按照相应的方式显示.比如以下两种filter,分别能在前端控制数字的近似精度显示和根据字符串长度补齐: round(value, ...

  8. Java注解的简单了解

    部分信息来自<Thinking In Java> 注解也成为元数据.什么是元数据?就是“关于数据的数据” 注解为我们在代码中添加信息提供了一种形式化的方法,使我们可以在稍后某个时刻非常方便 ...

  9. Java程序员也应该知道的系统知识系列之(网卡,cpu,内存,硬盘,虚拟化)

    https://yq.aliyun.com/articles/1718?spm=5176.100240.searchblog.16.UaGd04 https://yq.aliyun.com/artic ...

  10. git使用介绍

    Git简单介绍 参考网址: git使用简介 这个教程推荐使用:git教程 git和svn的差异 git和svn的最大差异在于git是分布式的管理方式而svn是集中式的管理方式.如果不习惯用代码管理工具 ...