1.清浮动(不考虑兼容的话这一项够用了):

.clear:after{

content:'';

display:block;

clear:both;

}

兼容ie6或7 加一个

.clear{

*zoom:1;  //用来触发 haslayout(IE浏览器的BFC)

}

2.BFC (一套渲染机制)

触发一个元素的BFC
相当于在这个元素里面建立起一堵围墙
围墙里面的内容和围墙外面的内容不会产生干扰
 

触发BFC的方式(以下任意一条就可以)

1.float的值不为none

2.overflow的值不为visible

3.display的值为table-cell、tabble-caption和inline-block之一

4.position的值不为static或则releative中的任何一个

https://www.cnblogs.com/CafeMing/p/6252286.html

BFC和清除浮动的更多相关文章

  1. BFC之清除浮动篇&clear

    我们在日常代码生活中,或多或少会利用浮动来布局,例如导航布局,如下图所示: 但是,我们在实现的时候,经常会遇到父元素“塌陷”以及清除浮动问题.例如 <!DOCTYPE html> < ...

  2. BFC清除浮动

    BFC 就是清除浮动 用来处理文档脱离文档流的问题 清除浮动的方法: a.父元素也添加一个浮动 产生弊端就是:margin 不能使用 b.给父元素添加一个:display:inline-block 弊 ...

  3. 【Web】网页清除浮动的方法

    网页中,经常用浮动的div来布局,但是会出现父元素因为子元素浮动引起内部高度为0的问题,为了解决这个问题,我们需要清除浮动,下面介绍4中清除浮动的方法. 在CSS中,clear属性用户清除浮动,语法: ...

  4. 详说 CSS 清除浮动

    转自:http://kayosite.com/remove-floating-style-in-detail.html 浮动,从诞生那天起,它就是个特别的属性——既为网页布局带来新的方法,却又随之产生 ...

  5. CSS给元素清除浮动影响的方法,--最全四种方法

    代码实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  6. CSS——浮动及应用&清除浮动

    浮动(float) 1.普通流(normal flow) 这个单词很多人翻译为 文档流 , 字面翻译 普通流 或者标准流都可以. 前面我们说过,网页布局的核心,就是用CSS来摆放盒子位置.如何把盒子摆 ...

  7. html-css:浮动_清除浮动

    1.浮动 清除浮动之前我们首先需要了解为什么要清除浮动 1. 假设我们有一个父盒子,不设置高度,其高度有内部子盒子的大小自动撑开,这样是完全可行的,因为有时候我们并不想直接固定死父盒子的大小,而是根据 ...

  8. CSS系列,清除浮动方法总结

    在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素.在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外 ...

  9. 【深入BFC】 关于CSS中float布局,清除浮动,和margin合并的原理解析,解开你心中的那些困惑!

    BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. ...

随机推荐

  1. Java学习随笔(1)--groovy爬虫

    package com.fan import com.fission.source.httpclient.ApiLibraryimport com.fission.source.httpclient. ...

  2. Server Memory Server Configuration Options 服务器内存服务配置选项

    Server Memory Server Configuration Options https://docs.microsoft.com/en-us/sql/database-engine/conf ...

  3. CSS 图像高级 径向渐变

    径向渐变 径向渐变使用 radial-gradient 函数语法. 这个语法和线性渐变很类似, 可以指定渐变结束时的形状 以及它的大小. 默认来说,结束形状是一个椭圆形并且和容器的大小比例保持一致. ...

  4. (1234队)NABCD分析

    1.N(需求) 我们通过平常上自习时发现的问题和在校调查发现人们在寻找空教室上自习时会遇到诸多问题,其中 问题一:找不到空教室:5% 问题二:非上课教室学生太多:70% 问题三:有占座情况:20% 问 ...

  5. jumpserver笔记

    一.安装docker使用官方脚本自动安装 curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun 二.拉取jumperse ...

  6. get() got an unexpected keyword argument

    TypeError: get() got an unexpected keyword argument 'news_id'ERROR basehttp 154 "GET /news/3/ H ...

  7. nodejs 开启http服务器

    1.首先安装node.js windows地址:https://nodejs.org/dist/v10.15.3/node-v10.15.3-x64.msi 配置成功的标志: 若没成功,也有可能是没有 ...

  8. 20175126《Java程序设计》第三学习总结

    # 20175126 2016-2017-2 <Java程序设计>第三周学习总结 ##课余收获——利用JAVA编写最简单的斗地主程序 -由于最近身边的朋友都在玩手机上的斗地主小游戏,我也就 ...

  9. Codeforces Round #553 (Div. 2) A题

    题目网址:http://codeforces.com/contest/1151/problem/A 题目大意:给定一个由大写字母构成的字符串和它的长度,有这样的操作,使任意一个字母变成与其相邻的字母, ...

  10. centos7 安装部署zabbix

    由于zabbix提供集中的web监控管理界面,因此服务在web界面的呈现需要LAMP架构支持. php 连接mysql服务,因为7版本mysql要收费,所以我们安装mariadb, 一.安装LAMP环 ...