文档章节

bfc和float注意点

boogoogle
 boogoogle
发布于 2017/04/25 17:13
字数 518
阅读 12
收藏 0
点赞 0
评论 0

伪类和伪元素不同:

 - div:after   
 - a:hover

padding 和margin的布局

- padding-top: 50%;  --二者都是以"父元素"的"宽度"为参照取百分比
- padding-left: 50%;

- margin-top: 30%;   -- 二者都是以"父元素"的"高度"为参照百分比
- margin-left: 30%;

清除浮动的原理:

- 普通文档流,
- float属性的元素脱离了当前父元素的普通流,不能撑起父元素高度了,
    - .clearfix
- 如果这时候设置了父元素为bfc,也可以撑起来,因为计算bfc高度的时候,浮动元素也参与计算
- bfc的元素本身仍然在普通流中
BFC:
- 形成bfc的元素,其内部的"块级元素"会形成一个新的普通文档流,内部元素浮动不会影响外面的布局
- 内部块级元素会占据一行,且子元素的"左外边距(margin-left)"紧贴着父元素的"左内间距(padding-left)"

- float: 定义元素往哪个方向浮动
	- 脱离了标准文档流,所以若其父元素已然形成bfc,要注意其兄弟元素是以块级元素排列,本身仍然要根据普通文档流的标准布局,
	- 以往应用于图像,使文本"环绕"在图像周围
	- 任何元素都可以浮动,浮动的元素会形成一个bfc,不论它本身是何种元素
	- 对于浮动的内联元素,需要指明一个明确的宽度,否则,他们会尽可能的窄

- *zoom:1 触发ie67的hasLayout闭合浮动

clearfix

-  这里最主要的是clear:both
- clear:left 意思是: 如果“我自身”的左边元素是float:left的,那么我就到下一行去(因为块级元素要自己占一行);如果它右边紧挨着一个float:right的,就需要clear:both了估计,要根据实际情况,所以一般都用:both
- 
·
.clearfix:{*zoom:1}
.clearfix: after{
    content: '';
    clear: both;
    display: block;
    visibility: hidden;
   }
·

哪些元素能够形成bfc

根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

© 著作权归作者所有

共有 人打赏支持
boogoogle
粉丝 10
博文 98
码字总数 26075
作品 0
昌平
前端工程师
CSS float相关详解

float属性是CSS常用的一个属性,应用场景广泛,同时也是一个难点,涉及到一些相关细节及注意点。因此,就特别整理总结一下。 一、float介绍 float元素也称为浮动元素,设置了float属性的元素...

Ruheng
2017/12/05
0
0
[布局概念] 关于CSS-BFC深入理解

写在前面 好记性不如烂笔头,研究了一下BFC,发现里面比较细的东西也是很多的!关于BFC,很多人可能都听说过BFC这个东西,大概知道这是个啥东西,相信很多人对此并没有一个非常细致的了解,本...

OB丶Koro1
2017/05/04
0
0
浮动定位BFC边距的合并

1. 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动元素的特征是 浮动模型也是一种可视化格式模型,浮动的框可以左右移动(根据float属性值而定),直到它...

熊蛋子17
2017/11/14
0
0
【前端Talkking】 CSS系列——CSS深入理解之float浮动

float属性是CSS中常用的一个属性,在实际工作中使用的非常多,如果使用不当就会出现意料之外的效果。虽然很多人说浮动会用就行、浮动过时了,但是对于优秀的前端开发人员,需要有"刨根问底"...

micstone
05/15
0
0
BFC 神奇背后的原理

BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等)。虽然我知道如何利用 BFC 解决这些问题,但当别人问...

cyper
2015/09/03
37
0
CSS层叠上下文与BFC

CSS中的层叠上下文和BFC是两个很虚但极其重要的概念,影响到网页布局的方方面面。有几篇博文讲得很详细,这里稍加摘录,便于记忆。 CSS层叠上下文 张鑫旭在深入理解CSS中的层叠上下文和层叠顺...

一点灵犀
2016/08/14
45
0
CSS布局模型 之 浮动模型(浮动的工作原理和清除浮动技巧?)

浮动的工作原理 浮动是让某元素脱离文档流,在浮动框之前和之后的非定位元素会当它不存在一样,可能沿着它的另一侧垂直流动,但都为其腾出空间,块级元素也不例外(被浮动元素占据了部分行空...

艺晨光
2017/08/22
0
0
一首歌的时间轻松搞定BFC的原理及应用

能不能给我一首歌的时间,紧紧的把那拥抱变成永远~ 开头献上杰伦放松一下。 什么是BFC? BFC即Block Formatting Context的缩写,中文翻译过来就是块级格式化上下文。 BFC的原理 本质上就是B...

舒店长
06/03
0
0
细说清除浮动

一、什么是清除浮动? 先说下为什么需要清除浮动。 一个元素设置了浮动(即 float 值为 left, right 或 inherit 并从父元素上继承 left 或 right 值)之后会影响它的兄弟元素的位置和父元素产...

只尺八寸
2015/12/10
50
0
CSS经典三栏布局方案

1. float布局 最简单的三栏布局就是利用float进行布局。首先来绘制左、右栏: 此时可以得到左右两栏分布: 这里写图片描述 接下来再来看中间栏如何处理。我们知道对于float元素,其会脱离文档...

李牙刷儿
2017/11/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Java8新特性之接口

在JDK8以前,我们定义接口类中,方法都是抽象的,并且不能存在静态方法。所有的方法命名规则基本上都是 public [返回类型] [方法名](参数params) throws [异常类型] {}。 JDK8为接口的定义带...

developlee的潇洒人生
33分钟前
0
0
aop + annotation 实现统一日志记录

aop + annotation 实现统一日志记录 在开发中,我们可能需要记录异常日志。由于异常比较分散,每个 service 方法都可能发生异常,如果我们都去做处理,会出现很多重复编码,也不好维护。这种...

长安一梦
44分钟前
1
0
将博客搬至CSDN

AHUSKY
55分钟前
1
0
Python web框架Django学习(1)

1.Django简介 (1)Python下有许多款不同的 Web 框架。Django是重量级选手中最有代表性的一位。许多成功的网站和APP都基于Django。Django是一个开放源代码的Web应用框架,由Python写成。 (2...

十年磨一剑3344
今天
0
0
Databook-数据之书

Databook-数据之书 用于数据分析的Jupyter Notebooks。 不需购买服务器,快速开始自己的数据分析过程。 源码:https://github.com/openthings/databook 作者:openthings,https://github.co...

openthings
今天
5
0
Python PIPEs

https://www.python-course.eu/pipes.php https://www.tutorialspoint.com/python/os_pipe.htm

zungyiu
今天
1
0
gRPC学习笔记

gRPC编程流程 1. proto文件定义 proto文件用于定义需要通过gRPC生成的接口,可以理解为接口定义文档 2. 通过构建工具生成服务基类代码-Maven或Gradle 3. 服务端开发 服务端实现类须实现通过构...

OSC_fly
今天
0
0
Docker Mac (三) Dockerfile 及命令

Dockerfile 最近学习docker的时候,遇到一件怪事,关于docker镜像可能会被破坏,还不知道它会有此措施 所以需要了解构建Dockerfile的正确方法 Dockerfile是由一系列命令和参数构成的脚本,这些命...

___大侠
今天
0
0
Android Studio+NDK+Cmake 移植FFmpeg-4.0.2命令行工具

一、编译 参考大神的帖子,亲测一次编译成功:https://blog.csdn.net/bobcat_kay/article/details/80889398 鉴于以前查文档的经验,这里附上编写例子的时间:2018年7月22日 我用的是ubantu,...

她叫我小渝
今天
0
0
mysql创建数据库

登录MYSQL mysql -u root -p 脚本创建数据库WeChat,并制定默认的字符集是utf8mb4。 CREATE DATABASE Wechat DEFAULT CHARSET utf8mb4 COLLATE utf8mb4_general_ci; 授权 grant all......

niithub
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部