<!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. Nodejs in Visual Studio Code 03.学习Express

    1.开始 下载源码:https://github.com/sayar/NodeMVA Express组件:npm install express -g(全局安装) 2.ExpressRest 打开目录 ...

  2. Google 2013 campus test-R1

    Reading Phone Number #include<iostream> #include<fstream> #include<vector> #includ ...

  3. 判断客户端浏览器是否安装了Flash插件

    <script> /*检测浏览器是否安装了插件(在IE 中无效)*/ function hasPlugin(name){ name = name.toLowerCase(); for(va ...

  4. Java多线程编程（二）

    在 Java多线程编程(一) 中的多线程并没有返回值,本文将介绍带返回值的多线程. 要想有返回值,则需要实现新的接口Callable而不再是Runnable接口,实现的方法也改为call()方法,执行 ...

  5. Cocoa Touch 层

    Cocoa Touch层包含创建 iOS应用程序所需的关键框架.上至实现应用程序可视界面,下至与高级系统服务交互,都需要该层技术提供底层基础.在开发应用程序的时候,请尽可能不要使用更底层的框架,尽可能 ...

  6. 生成 JSON 数据

    //build an info object and convert to json NSDictionary* info = [NSDictionary dictionaryWithObjectsA ...

  7. HDU 2485 Destroying the bus stations (IDA*+ BFS)

    传送门:http://acm.hdu.edu.cn/showproblem.php?pid=2485 题意:给你n个点,m条相连的边,问你最少去掉几个点使从1到n最小路径>=k,其中不能去掉1, ...

  8. 《火球——UML大战需求分析》(第1章 大话UML)——1.4 如何学好UML？

    说明: <火球——UML大战需求分析>是我撰写的一本关于需求分析及UML方面的书,我将会在CSDN上为大家分享前面几章的内容,总字数在几万以上,图片有数十张.欢迎你按文章的序号顺序阅读,谢 ...

  9. NYOJ 980 格子刷油漆 动态规划

    这道题目状态转移方程比较复杂,刚开始以为没这么多情况,看了好多大牛的博客再加上与同学讨论才看懂,写下心得. 因为起点不固定,所以我们一个一个来考虑,先从角上考虑,设三个数组来表示分别为D,A,Sum, ...

  10. 【转】app瘦身

    iPhone经过这几年的发展,已经发生了很大的变化,例如屏幕变得更加多样,尺寸更多,内存变得更大,CPU的架构也在变化.伴随着iPhone的变化,iOS也在变化,例如AutoLayout.size c ...