<!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. 【用PS3手柄在安卓设备上玩游戏系列】FC（任天堂NES/FC主机）模拟器

    NESoid 是安卓系统下公认最好的FC模拟器.据我所知,现在安卓系统下面的绝大部分的FC模拟器,都是基于 NESoid 的内核来开发的. 官方网站:http://www.nesoid.com NES ...

  2. 甲骨文公司 Oracle

    甲骨文公司 甲骨文公司,全称甲骨文股份有限公司,是全球最大的企业软件公司,总部位于美国加利福尼亚州的红木滩.甲骨文是继Microsoft之后,全球收入第二多的软件公司.甲骨文公司1989年正式进入中国 ...

  3. banana pro 板子

    http://www.lemaker.org/cn/article-23-1.html

  4. mysql启动停止,一台服务器跑 多个mysql数据库

    一.以非特权用户运行MySQL服务器在讨论如何启动MySQL服务器之前,让我们考虑一下应该以什么用户身份运行MySQL服务器.服务器可以手动或自动启动.如果你手动启动它, 服务器以你登录Unix(Li ...

  5. DataTable与Linq相互转换

    DataTable通过dt.AsEnumerable()方法转换可用Linq查询,反之,Linq也可以转化为DataTableDataTable newDt = query1.CopyToDataTa ...

  6. C#中用PadLeft、PadRight 补足位数

    在 C# 中可以对字符串使用 PadLeft 和 PadRight 进行轻松地补位. PadLeft(int totalWidth, char paddingChar) //在字符串左边用 paddi ...

  7. cocoa Touch-UIKit

    1. 简介: UIKitk框架提供一系列的Class(类)来建立和管理iPhone OS应用程序的用户界面( UI )接口.应用程序对象.事件控制.绘图模型.窗口.视图和用于控制触摸屏等的接口. (P ...

  8. C# 网络编程之网页简单下载实现

    这是根据<C#网络编程实例教程>中学到的知识实现的一个C#网页简单下载器,其中涉及到的知识主要是HTTP协议编程中相关类:HttpWebRequest类.HttpWebResponse类. ...

  9. JAVA WEB实现前端加密后台解密

    最近在研究登陆密码的加密,下边上具体代码,只是给出核心代码,具体的代码视业务而定吧,给位有什么问题或者意见请留言. 加密方法用的是AES-128-CBC,BASE64用的是org.apache.com ...

  10. HTML基础总结<标题>

      HTML: 标题 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的. <h1> 定义最大的标题.<h6> 定义最小的标题. & ...