<!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. CSS创意与视觉表现

    视觉效果 CSS代码: .cover { padding: 36% 50%; background: linear-gradient(to right, white 50%, black calc(5 ...

  2. 【PAT甲级】1061 Dating (20 分)

    题意: 给出四组字符串,前两串中第一个位置相同且大小相等的大写字母(A~G)代表了周几,前两串中第二个位置相同且大小相等的大写字母或者数字(0~9,A~N)代表了几点,后两串中第一个位置相同且大小相等 ...

  3. 三年以上php开发经验常见面试题

    01 一般有三年以上php开发经验去百度.腾讯面试,常会接触的面试题小总结一下: 02 0.简单做一下自我介绍,?  然后谈一下近三年来你的得意之作? 03 1.面试官看过你的简历,会问一些你做的项目 ...

  4. uniGUI之通过URL控制参数(25)

    通过URL代入参数,在代码中读取,如: http://localhost:8077/?ServerPort=212&&ServerIP=192.168.31.12 procedure ...

  5. 2020.02.28 Linux 命令

    Cat   语法格式 cat [-AbeEnstTuv] [--help] [--version] fileName 参数说明: -n 或 --number:由 1 开始对所有输出的行数编号. -b ...

  6. Java Juc学习笔记

    Java JUC 简介 在 Java 5.0 提供了 java.util.concurrent (简称JUC )包,在此包中增加了在并发编程中很常用的实用工具类,用于定义类似于线程的自定义子系统,包括 ...

  7. 十四 OGNL的概述

    1 什么是OGNL? 对象图导航语言(对象图,以任意一个对象为根,通过OGNL;可以访问与这个对象关联的其他对象).比EL表达式强大很多倍. 可以存取对象的任意属性.调用对象的方法,遍历整个对象的结构 ...

  8. git 从创建到推送到远程，到拉取，实操

    https://www.liaoxuefeng.com/wiki/896043488029600/900003767775424 初始化 git init 添加所有文件到暂存区 git add . c ...

  9. C++代码书写规范——给新手程序员的一些建议

    代码就是程序员的面子,无论是在工作中在电脑上写程序代码还是在面试时在纸上写演示代码我们都希望写出整洁,优雅的代码.特别在工作中当我们碰到需要维护别人的代码,或者是多人参与一个项目大家一起写代码的时候, ...

  10. 了解 Fetch API与Fetch+Async/await

    背景 提及前端与服务器端的异步通信,离不开 Ajax (Asynchronous JavaScript and XML).实际上我们常说的 Ajax 并非指某一项具体的技术,它主要是基于用脚本操作 H ...