BFC和清除浮动
1.清浮动(不考虑兼容的话这一项够用了):
.clear:after{
content:'';
display:block;
clear:both;
}
兼容ie6或7 加一个
.clear{
*zoom:1; //用来触发 haslayout(IE浏览器的BFC)
}
2.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和清除浮动的更多相关文章
- BFC之清除浮动篇&clear
我们在日常代码生活中,或多或少会利用浮动来布局,例如导航布局,如下图所示: 但是,我们在实现的时候,经常会遇到父元素“塌陷”以及清除浮动问题.例如 <!DOCTYPE html> < ...
- BFC清除浮动
BFC 就是清除浮动 用来处理文档脱离文档流的问题 清除浮动的方法: a.父元素也添加一个浮动 产生弊端就是:margin 不能使用 b.给父元素添加一个:display:inline-block 弊 ...
- 【Web】网页清除浮动的方法
网页中,经常用浮动的div来布局,但是会出现父元素因为子元素浮动引起内部高度为0的问题,为了解决这个问题,我们需要清除浮动,下面介绍4中清除浮动的方法. 在CSS中,clear属性用户清除浮动,语法: ...
- 详说 CSS 清除浮动
转自:http://kayosite.com/remove-floating-style-in-detail.html 浮动,从诞生那天起,它就是个特别的属性——既为网页布局带来新的方法,却又随之产生 ...
- CSS给元素清除浮动影响的方法,--最全四种方法
代码实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- CSS——浮动及应用&清除浮动
浮动(float) 1.普通流(normal flow) 这个单词很多人翻译为 文档流 , 字面翻译 普通流 或者标准流都可以. 前面我们说过,网页布局的核心,就是用CSS来摆放盒子位置.如何把盒子摆 ...
- html-css:浮动_清除浮动
1.浮动 清除浮动之前我们首先需要了解为什么要清除浮动 1. 假设我们有一个父盒子,不设置高度,其高度有内部子盒子的大小自动撑开,这样是完全可行的,因为有时候我们并不想直接固定死父盒子的大小,而是根据 ...
- CSS系列,清除浮动方法总结
在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素.在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外 ...
- 【深入BFC】 关于CSS中float布局,清除浮动,和margin合并的原理解析,解开你心中的那些困惑!
BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. ...
随机推荐
- go 0000
1,函数不能比较 函数默认都是值传递, 除了 map 值, slice (切片) channel (管道) interface 默认以这4个默认 引用传递 两个 defer ...
- docx httpheader头设置
设置contentType内容类型如下: Extension MIME Type .doc application/msword .dot application/msword .docx appli ...
- [记录] Vue中的dom操作
使用过Vue的同学都应该有这样一个感觉,在vue中页面是基于数据驱动的,不需要我们自己操作dom,框架帮我们完成了这一步,事实上Vue官方也建议我们这样做 在绝大多数情况下是不需要操作dom就可以完成 ...
- mount命令和自动挂载实例
前言 介绍mount命令和一个实例. mount命令 作用 作用:挂载linux系统外的文件 命令格式 mount [-hV] mount -a [-fFnrsvw] [-t vfstype] mou ...
- configure,make,make install作用和关系的一些理解
一. 整体关系 为求直观,画了一张大致关系图: 我个人的理解是这样的,将编译安装比作做菜的话, △ configure的作用,以厨师的构想以参数的形式作为输入,生成并输出菜谱,菜谱包含两个部分---- ...
- xftp无法用root账号登录问题
编辑vim /etc/ssh/sshd_config文件 把PermitRootLogin Prohibit-password 添加#注释掉 新添加:PermitRootLogin yes 更改Per ...
- 爬了招聘网站之后,总结Python学习的几点建议
来源商业新知网,原标题::爬了招聘网站之后,给你几点学习Python的建议 Python语言相关的岗位非常多,有运维,有自动化测试,有后端开发,有机器学习,如果想要快速上手,并且有不错的就业,那就推荐 ...
- Java & C# BCD编码与十进制转换
using System;using System.Collections.Generic;using System.Text; namespace Base{ public class BCDHel ...
- JAVA企业级服务器应用之Tomcat
Tomcat简介 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由Apache,Sun和其他一些公司及个人共同开发而 ...
- Python设计模式 - UML - 状态图(State Machine Diagram)
简介 状态图主要用于描述对象在其生命周期中各种状态.状态之间的转换过程.触发状态转换的各种事件(条件)及执行的动作. 状态图构建步骤 - 找出适合用状态图描述的类.确定类中需要做状态图的重要对象 - ...