设为flex 布局后 子元素的float clear vertical-align 失效
采用 Flex 布局的元素，称为 Flex 容器
vertical-align 属性设置元素的垂直对齐方式
对于flex布局 主要有六大属性 分别是：
四种方向
css .box { flex-direction: row | row-reverse | column | column-reverse; }
row ：
row-reverse：
column:
column-reverse:
css .box{ flex-wrap: nowrap | wrap | wrap-reverse; }
wrap：
nowarp：
wrap-reverse：
css .box{ flex-flow: row wrap; }
css .box { justify-content: flex-start | flex-end | center | space-between | space-around; }
flex-start：
flex-end：
center：
space-between：
space-around：
css .box { align-items: flex-start | flex-end | center | baseline | stretch; }
css .box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }
——————————————————————————————————————————————
什么是BFC :
块格式化上下文 ，晦涩难懂。
可以看作为开辟了一块独立空间，空间以内的元素不会影响到外面的元素。
- https://juejin.cn/post/6844903544726749198 部分参考此博客
1.清除浮动
BFC 可以包含浮动的元素（清除浮动），只要设置容器overflow：hidden
2.布局：自适应 两栏布局
未形成BFC：
显示重叠
可以看到margin 发生了重合 在垂直路径上
注释放开：即可创造局部bfc
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bfc</title>
<style>
/* .wrap {
overflow: hidden;
} */
p {
color: rgb(1, 12, 3);
background: rgb(204, 253, 255);
width: 200px;
line-height: 100px;
text-align: center;
margin: 100px;
}
</style>
</head>
<body>
<p>A-BFC</p>
<!-- <div class="wrap"> -->
<p>B-BFC</p>
<!-- </div> -->
</body>
</html>
最佳触发条件：overflow:hidden
<div></div>
<div class="clear"></div>
.clear{clear:both;}
<div class="container clearfix">
<div class="wrap">aaa</div>
</div>
.clearfix:after{
content:""; /*设置内容为空*/
height:0; /*高度为0*/
line-height:0; /*行高为0*/
display:block; /*将文本转为块级元素*/
visibility:hidden; /*将元素隐藏*/
clear:both; /*清除浮动*/
}
.clearfix{
zoom:1; /*为了兼容IE*/
}
以下三种方式均可：
display：none；
visibility：hidden；
opacity：0；
https://segmentfault.com/a/1190000016990089 部分参考此博客
DOM的变化影响到了预算的几何属性如宽高，浏览器重新计算元素的几何属性，其他元素的几何属性也会受到影响，浏览器需要重新构造渲染书，这个过程称之为重排，浏览器将受到影响的部分重新绘制在屏幕上的过程称为重绘.
var el = document.querySelector('.el');
el.style.borderLeft = '1px';
el.style.borderRight = '2px';
el.style.padding = '5px';
使用cssText 将多次的修改进行合并 这样dom节点则只会被修改一次 ，避免了浏览器的多次重排
var el = document.querySelector('.el');
el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px';
也可以对className 进行直接修改
// css
.active {
padding: 5px;
border-left: 1px;
border-right: 2px;
}
// javascript
var el = document.querySelector('.el');
el.className = 'active';
使用fragment
对于多次重排的元素，比如动画，使用绝对定位脱离文档流，使其不影响其他元素
下面，就写一下我自己对 redux 和 React-redux 的学习以及使用的心得，权当是对...
最近写SDK的时候需要用到object类型提示符，PHPStorm智能提示说需要PHP7.2以上才...
引言 当我们设计一个完整的电路而言我们除了要知道我们要设计的主芯片电路如FPGA...
前言 初次了解JWT，很基础，高手勿喷。 基于Token的身份验证用来替代传统的cooki...
在网页中插入百度地图 如果想在自己的网页上面加入百度地图的话，可以用百度地图...
据外媒报道称，微软承认了一个错误，那就是在之前推出的Windows 10更新中，部分...
1、为什么redis要持久化 将redis作为数据库来使用 将redis作为写缓冲读缓冲不需...
在平时开发中我们经常会用到 Webpack这个时下最流行的前端打包工具。它打包开发...
Spring 整合 Hibernate 时启用二级缓存实例详解 写在前面： 1. 本例使用 Hiberna...
在需要的连接添加行内样式： 复制代码 代码如下: a href="ddrb/090630.asp" targ...
