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. javascript isNaN

    因为以前felx组件默认是-99999999,后来因为方便组件和数据库的操作,就统一修改Number类型的数据为NAN类型了,然后通过isNaN去判断,而然很多表达式是返回字符串的或者null,要注意 ...

  2. 【枚举】Vijos P1012 清帝之惑之雍正

    题目链接: https://vijos.org/p/1012 题目大意: 给n个坐标(n<=100 000),求直线距离最短是多少.数据较大用long long 或 double 题目思路: [ ...

  3. Java实现人民币大写代码解析

    想要实现人民币大写,在发票等场景中使用?? 1234.56显示为:壹仟贰佰叁拾肆元伍角陆分,那就往下看看吧! 本程序可以实现 0 到 9999 9999 9999.994 以内的人民币大写转换,精确到 ...

  4. ural 1136. Parliament

    题目链接:http://acm.timus.ru/problem.aspx?space=1&num=1136 题目描述:给定一个按照(左子树-右子树-根)(即先序)遍历序列的树,求其按照 右子 ...

  5. oracle 零散知识汇集

    1. Select '登陆' + 2 From dual会报错: ora- 01722 无效数字,原理是oracle把'登陆'当成数字来和2进行加法运算. Select '登陆'|| 2 From d ...

  6. Java中的字符串流的读取和写入（创建文件并判断重复账户）

    各位我又来了!!哎!好心酸!我还没注册到三天!!没法登上博客的首页!!心累!! import java.io.BufferedOutputStream; import java.io.Buffered ...

  7. 小菜学习Lucene.Net(更新3.0.3版本使用)

    花了两天的时间研究了下Lucene.Net 发现确实挺好玩.... 最新版本是3.0.3 (最后更新时间2012-10) 可惜3.0.3版本的Lucene.net无法和盘古分词 (最新版为2.3.1. ...

  8. SVN server的搭建

    当做大的项目是,svn是代码管理的好工具,假设是用自己的server,那么须要搭建SVNserver. Subversion是一款很优秀的svnserver工具,笔者採用VisualSVN serve ...

  9. Android代码混淆

    混淆器(ProGuard) --- 混淆器通过删除从未用过的代码和使用晦涩名字重命名类.字段和方法,对代码进行压缩,优化和混淆.结果是一个比較小的.apk文件,该文件比較难进行逆向project.因此 ...

  10. cocos2d-x项目过程记录(跨平台iOS和Android)

    (原创作品,欢迎转载,注明出处,谢谢:http://www.cnblogs.com/binxindoudou/admin/EditPosts.aspx?postid=3205249) 1.配置环境,重 ...