<!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 0205

    目录 700 二叉搜索树中的搜索 175 组合两个表 仍旧不理解 left join 590. N叉树的后序遍历 递归: 迭代: 589 N叉树的前序遍历 递归, 注意 递归 过程中附带的 actio ...

  2. 3、gitlab备份与恢复

    1.备份 #修改配置文件,启用备份 [root@localhost ~]# vim /etc/gitlab/gitlab.rb 377 gitlab_rails['backup_path'] = &q ...

  3. idea激活，使用破解补丁无需注册码

    idea激活,使用破解补丁无需注册码 2017年08月19日 10:57:54 标签: idea / 破解 / 补丁 / 软件 / 13891 编辑 删除 idea激活,JetBrain旗下软件激活 ...

  4. JavaScript高级特征之面向对象笔记二

    Prototype 1.  当声明一个函数的时候,浏览器会自动为该函数添加一个属性prototype, 2.  该属性的默认值为{} 3.  可以动态的给prototype增加key和value值 4 ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：嵌套列

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

  6. Android音频捕获（录音）（转）

    原文:http://www.yiibai.com/android/android_audio_capture.html Android有一个内置的麦克风,通过它可以捕获音频和存储,或在手机进行播放.有 ...

  7. i.MX RT600之DMIC外设介绍及应用

    恩智浦的i.MX RT600是跨界处理器产品,同样也是i.MX RTxxx系列的开山之作.不同于i.MX RT1xxx系列单片机,i.MX RT600 采用了双核架构,将新一代Cortex-M33内核 ...

  8. Python 面试问答 Top 25

    Python 是一种解释型,交互式,面向对象的高级编程语言.和别的一些使用标点符号的语言不同,Pythons使用了大量的英语单词作为关键字,因而具有很好的可读性.而且跟其他编程语言相比,它有更少的语法 ...

  9. 如何优雅地根治null值引起的Bug！

    本人免费整理了Java高级资料,涵盖了Java.Redis.MongoDB.MySQL.Zookeeper.Spring Cloud.Dubbo高并发分布式等教程,一共30G,需要自己领取.传送门:h ...

  10. S32K144之FlexMem,FlexNVM,FlexRAM,System RAM, SRAM 区别与联系

    参考手册中常常见到有关memory的关键字,如FlexMem,FlexNVM,FlexRAM,System RAM, SRAM,那么它们到底是什么意思呢?有什么区别和联系? 参考资料 [1]S32K1 ...