<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Bootstrap 实例 - 清除浮动</title>

        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>

        <div class="clearfix"  style="background: #D8D8D8;border: 1px solid #000;padding: 10px;">

            <div class="pull-left" style="background:#58D3F7;">

                向左快速浮动

            </div>

            <div class="pull-right" style="background: #DA81F5;">

                向右快速浮动

            </div>

        </div>

    </body>

</html>

吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：清除浮动1的更多相关文章

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：显示下拉式功能

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：显示关闭按钮

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：将页面元素所包含的文本内容替换为背景图

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：在元素获取焦点时显示(如：键盘操作的用户)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：除了屏幕阅读器外，其他设备上隐藏元素

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：强制元素隐藏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：清除浮动

    <!DOCTYPE html> <html> <head> <title>Bootstrap .clearfix 实例</title> &l ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：设置元素为 display:block 并居中显示

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：元素浮动到右边

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. Leetcode 12,452,455-贪心算法

    Leetcode第12题,整数转罗马数字,难度中等 整个题目比较好理解,难度也不大,就算不过脑子,用一串if也基本上可以解决问题,比如 /** 执行用时:6ms,在所有 Java 提交中击败了52.6 ...

  2. MATLAB的安装与入门

    最近安装了MATLAB来用,过程遇到很多问题,担心自己改天如果换电脑了就忘记一些安装问题,所以记录一个. 首先是资源问题,我在贴吧找到了好心人分享的破解资源(非常感谢好心人的资源(ง •_•)ง),然 ...

  3. redhat 7.6 流量监控命令、软件（1） ethstatus

    1. 查看1个月内流量,只保留一个月的流量 命令: sar   -n  DEV   -f    /var/log/sa/sa26 RX代表进来的流量,TX代表出去的流量 2.安装查看实时流量软件eth ...

  4. CPU的态

    CPU是OS最基本的硬件. cpu的态(mode): 1.mode展示CPU的工作状态 2.mode用来给对资源和指令权限的描述 分类: 1.kernel mode(核态): 权限最高 OS内核/管理 ...

  5. 「JSOI2010」排名

    「JSOI2010」排名 传送门 看到先后顺序限制和字典序,很容易想到拓扑排序 + 贪心. 考虑具体做法: 对于第一问: 我们开一个大根堆来代替队列,然后从大到小构造出各个元素的排名. 我们连边 \( ...

  6. iOS一个简单的设置圆角不引起性能问题的分类

    http://www.cocoachina.com/articles/18756 iOS设置圆角矩形和阴影效果 https://www.cnblogs.com/rayshen/p/4900336.ht ...

  7. luogu P2280 激光炸弹(二维前缀和)

    由题给的xi, yi范围,可以建立二维地图maze[i][j],记录i j范围上的所有目标的价值总和 即有maze[xi][yi] += wi 然后接下来的目标就是求出该二维数组的前缀和 可得到前缀和 ...

  8. Spark教程——（10）Spark SQL读取Phoenix数据本地执行计算

    添加配置文件 phoenixConnectMode.scala : package statistics.benefits import org.apache.hadoop.conf.Configur ...

  9. Lora笔记

    Lora笔记 2016-03-26 [概述] LPWAN技术 无线跳频技术简介 https://bitbucket.org/ [节点] SX1278测试 SX1278测试 SX1276调试总结 LoR ...

  10. Python 全国考级二级

    第1章  Python概述 [Python语言简介] Python是一种跨平台.开源.免费的解释型高级动态编程语言,是一种通用编程语言. Python支持命令式编程和函数式编程两种方式,并且完全支持面 ...