<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             body{

                 margin: 0;

             }

             /*浮动*/

             /*浮动只有向左和向右浮动*/

             /*浮动会让元素脱离文档流,后面不浮动的元素会占据原来的位置*/

             /*浮动会让元素转换成行内块元素(让浮动的元素并列在一行)*/

             /*当父级元素没有设置固定高度,子元素都浮动时,父级元素的高度就无法被撑开

                    解决办法：

                              给父级元素添加overflow:hidden*/

             /*停止浮动:

                   a.碰到父级元素的边界会停止

                   b.碰到前面有浮动的元素也会停止

                   c.碰到没有浮动的元素*/

             /*清除浮动:

                   a.clear:both(left,right);

                   b.在父级元素添加属性overflow：hidden;

                   c.使用成熟的清除浮动样式，clearfix

                         .clearfix:after,.clearfix:before{content:'';display:table;}

                         .clearfix:after{clear:both;}

                         .clearfix{zoom:1;}*/

             .float{

                 width: 200px;

                 height: 200px;

                 background-color: yellowgreen;

                 text-align: center;

                 line-height: 200px;

                 /*float: left;*/

             }

             .float1{

                 width: 200px;

                 height: 200px;

                 background-color: yellow;

                 text-align: center;

                 line-height: 200px;

                 float: right;

             }

             .clearfloat{

                 zoom: 1;

             }

         </style>

     </head>

     <body>

         <div class="float">

             box1

         </div>

         <div class="float1">

             box2

         </div>

         <div class="clearfloat">

         </div>

     </body>

 </html>

CSS-14-浮动的更多相关文章

  1. Html 常见标签,css基础样式,css的浮动和清流,浏览器的兼容

    1.html模板<!DOCTYPE html><html><head> <meta charset="UTF-8"> <tit ...

  2. css清除浮动深度解析

    首先引入一个新的概念"包裹". float:left会使得该属性的作用容器包裹住其内部元素:那么还有么有其他属性能够产生类似于浮动这种包裹性? 答案是有的:像"浮动&qu ...

  3. css清除浮动大全共8种方法

    原文链接http://www.jb51.net/css/173023.html 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同 ...

  4. CSS清除浮动技巧

    一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了f ...

  5. DIV+CSS 清除浮动方法总结

    DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所 ...

  6. CSS清除浮动八种方法

    在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 清除浮动是每一个 web前台设 ...

  7. css清除浮动的方法汇总

    这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ------------- ...

  8. 更简洁的 CSS 清理浮动方式

    CSS清理浮动有很多种方式,像使用 br 标签自带的 clear 属,使用元素的 overflow,使用空标签来设置 clear:both 等等.但考虑到兼容问题和语义化的问题,一般我们都会使用如下代 ...

  9. css清除浮动定位造成的异常

    清除浮动是为了解决高度塌陷的问题:内层有好几个div有宽有高,并且选择了浮动定位,但是外层的div却并没有设置宽高.在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动( ...

  10. 【转】CSS清除浮动_清除float浮动

    CSS清除浮动方法集合 一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 浮动产生样式效果截图 ...

随机推荐

  1. CP防火墙使用命令批量创建对象和策略

    Step1:批量创建网络对象 使用mgmt_cli 命令批量创建host对象,注意该命令需要管理员账号和密码 mgmt_cli add host name Host_10.133.1.100 ip-a ...

  2. 【Docker】Ubuntu16.04将Docker升级至最新版

    1.使用curl升级到最新版 curl -fsSL https://get.docker.com/ | sh 2.重启Docker sudo systemctl restart docker 3.设置 ...

  3. 学习python资料

    资料链接:https://www.cnblogs.com/wupeiqi/articles/5433893.html

  4. #mysql查询特定数据库中的所有表名

    #mysql查询特定数据库中的所有表名select table_namefrom information_schema.tableswhere table_schema='smbms' and tab ...

  5. 适配器模式 iOS

    前言: 最近需求作一个公共空间的需求,最后决定用适配器模式来做. 首先,需求是什么? 在我们app中,会有很多列表,tableviewcell的样式会比较统一(当然,我之前在公司那个app不算很大,基 ...

  6. node多进程的创建与守护

    node是单线程运行,我们的node项目如何利用多核CPU的资源,同时提高node服务的稳定性呢? 1. node的单线程 进程是一个具有一定独立功能的程序在一个数据集上的一次动态执行的过程,是操作系 ...

  7. 20191121-10 Scrum立会报告+燃尽图 06

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2019fall/homework/10070 一:组名: 组长组 组长:杨天宇 组员:魏新  罗杨美慧  王歆 ...

  8. $Noip2013/Luogu1966$ 火柴排队 贪心+离散化+逆序对

    $Luogu$ $Description$ 给定等长的$a,b$两个序列.每次可以交换一个序列中相邻两个数.求最小的交换次数使得$\sum(a_i-b_i)^2$最小. $Sol$ 交换后的序列一定满 ...

  9. win服务器管理工具，服务器vps管理

    win系列服务器,vps桌面如何管理?用这个工具: IIS7远程桌面批量管理,同时管理上千台vps,服务器,3389远程端口.

  10. Spring中常见的设计模式——代理模式

    一.代理模式的应用场景 生活中的中介,黄牛,等一系列帮助甲方做事的行为,都是代理模式的体现.代理模式(Proxy Pattern)是指为题对象提供一种代理,以控制对这个对象的访问.代理对象在客户端和目 ...