<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>clearfix原理</title>

    <style>

        *{

            padding:0;

            margin: 0;

        }

        .header,.aside,.main,.footer{

            border: 1px solid yellow;

            background-color: silver;

            margin-bottom: 10px;

            height: 200px;

        }

        .aside{

            height: 300px;

            float: left;

            width: 200px;

        }

        .main{

            float: left;

            width: 980px;

            /*margin-left: 202px;*/

        }

        .clerafix{

            display: table;/* 触发bfc,让div具有包裹性*/

        }

        .clerafix:before,.clerafix:after{

            content: "";

            display:block;

            clear: both;

            height: 0px;

        }

        /* 在IE6触发bfc,让div具有包裹性*/

        /*.clerafix{*/

            /*zoom: 1;*/

        /*}*/

    </style>

</head>

<body>

   <div class="header">

       header

   </div>

   <div class="wrap clerafix">

       <div class="aside">

             aside

       </div>

       <div class="main">

          main

       </div>

   </div>

<div class="footer">

    foot

</div>

</body>

</html>

学习微信小程序之css17clearfix原理的更多相关文章

  1. 与大家分享学习微信小程序开发的一些心得

    因为我也才开始学习微信小程序不久,下文也是现在的一时之言,大家有不同的想法也可以在评论里共同交流讨论,希望文章能给大家提供一点点帮助. 最近接触到了一些前端框架,像Vue.js,React,发现小程序 ...

  2. 一个C#程序员学习微信小程序路由的笔记

    路由大家应该都知道,在微信小程序也是有的,毕竟它是单页面应用程序.在WeChat中有五种跳转方式,分别是wx.switchTab.wx.reLaunch.wx.redirectTo.wx.naviga ...

  3. 新人学习微信小程序开发之框架篇

    大家好我是智哥,一名专注于前端领域的一名码农. 咱们今天主要来说说微信小程序, 最近一段时间微信群里的小程序,小游戏各种分享是突然一下子就爆发了,现在来看小程序作为微信的重磅功能无疑又是下一个风口.咱 ...

  4. 移动开发之【微信小程序】的原理与权限问题以及相关的简易教程

    这几天圈子里到处都在传播着这样一个东西,微信公众平台提供了一种新的开放能力,开发者可以快速开发一个小程序,取名曰:微信公众平台-小程序 据说取代移动开发安卓和苹果,那这个东东究竟是干吗用的?但很多人觉 ...

  5. 一个C#程序员学习微信小程序的笔记

    客户端打开小程序的时候,就将代码包下载到本地进行解析,首先找到了根目录的 app.json ,知道了小程序的所有页面. 在这个Index页面就是我们的首页,客户端在启动的时候,将首页的代码装载进来,通 ...

  6. 学习微信小程序及知识占及v-if与v-show差别

    注意点: 一.接口调用方式: getOpenid: function () { var that = this; return new Promise(function (resolve, rejec ...

  7. 从零开始学习微信小程序

    1.微信公众号和小程序的区别 公众号可以基于html5.vue.react.anguar开发,小程序只能用小程序开发语言. 小程序更接近于原生app. 借助jssdk调用手机功能强大. 开始: 2.创 ...

  8. 微信小程序的实现原理

    一.背景 网页开发,渲染线程和脚本是互斥的,这也是为什么长时间的脚本运行可能会导致页面失去响应的原因,本质就是我们常说的 JS 是单线程的 而在小程序中,选择了 Hybrid 的渲染方式,将视图层和逻 ...

  9. 微信小程序之setData原理以及几点关于小程序的吐槽

    小程序不方便之处: 1: 想做个获取列表中每个item所在的对应滚动条的高度在哪里,或者元素本身的高度也不好获取,极其不方便,网上看的别人做的滚动条相关的,都是写死或者已知的item高度,目前没找到正 ...

随机推荐

  1. jquery 选择器 的学习，自己慢慢来

    1//加载所有元素后,执行下列代码 <script type="text/javascript"> $(document).ready(function(){ //选择 ...

  2. Hyper-V连接虚拟机异常，“无法进行连接，因为可能无法将凭据发送到远程计算机”

    前两天把公司的TFS从2010升级到TFS2012(昨天又升级到TFS2013).今天使用服务器Hyper-V连接虚拟机时居然报错了. 翻看各种日志,虽然错误大一对一对地,但找不到任何有用的信息.无奈 ...

  3. IBM Intel 微软

    IBM是全球IT第一巨头,也是一个很奇特也很强大强大的公司,从螺丝钉键盘鼠标到CPU硬盘内存到大型机巨型机,它都可以制造,从软件到硬件到服务,它都可以提供,这在IT历史上,是否绝后我不敢说,空前应该是 ...

  4. 如何用命令将本地项目上传到git

    1.(先进入项目文件夹)通过命令 git init 把这个目录变成git可以管理的仓库 git init 2.把文件添加到版本库中,使用命令 git add .添加到暂存区里面去,不要忘记后面的小数点 ...

  5. Effective C++ 第二版 40)分层 41)继承和模板 42)私有继承

    条款40 通过分层来体现"有一个"或"用...来实现" 使某个类的对象成为另一个类的数据成员, 实现将一个类构筑在另一个类之上, 这个过程称为 分层Layeri ...

  6. Fastjson Feathure

    转载于:http://code.alibabatech.com/wiki/display/FastJSON/Serial+Features Fastjson序列化时,可以指定序列化的特性,以满足不同的 ...

  7. 持久化API（JPA）系列(三)实体Bean的开发技术-建立与数据库的连接

    在EJB 2.x中.EJB有3种类型的Bean.各自是会话Bean(Session Bean).消息驱动Bean(Message-Driven Bean)和实体Bean(Entity Bean). 随 ...

  8. 经典算法:快排的Javascript版本

    function swap(arr,l,r){ var temp=arr[l]; arr[l]=arr[r]; arr[r]=temp; } function partition(arr,camp,l ...

  9. 动态规划+滚动数组 -- POJ 1159 Palindrome

    给一字符串,问最少加几个字符能够让它成为回文串. 比方 Ab3bd 最少须要两个字符能够成为回文串 dAb3bAd 思路: 动态规划 DP[i][j] 意味着从 i 到 j 这段字符变为回文串最少要几 ...

  10. DBMS_STATS常用方法（收集oracle信息）

    –收集数据库信息EXEC DBMS_STATS.gather_database_stats;EXEC DBMS_STATS.gather_database_stats(estimate_percent ...