标签：浮动 bfc clear 元素 高度 textDiv call 链接 CSS

本来想写个长篇大论，但是emmmm……我实在是忘记的太快了，所以下面越简单通俗越好，以及给出了具体的链接 

总结特点： 首先this就是指代的运行环境，其次容易搞混的xx的函数都转换成函数地址和代码块就好懂多了 在看了这么多之后，自己的总结: this作用域这块大概是谁调用这个函数，函数里的this就指向谁，如果是两套a.b.c() 那么指向是离函数c()最近的b里面，如果是var f=b.c 这样就只是简单生搬了c里面的内容和b没什么关系。 bind就是F是Function   F.call(obj,参数） 实际上就是obj.F， obj内部写了一F的方法，让F可以访问obj内部的东东 A.call（B）就是B.A 这样a可以访问b里的东西，a里的this也指向了B  1 参 https://www.cnblogs.com/pssp/p/5216085.html （函数的this是谁调用它 的时候才确定的） 2 参https://www.ruanyifeng.com/blog/2018/06/javascript-this.html（没什么关系那里） 这样是最标准的，安乐的this环境，一定是对象里的函数~  var obj={     var a=1；     function：{ 。。。this.a 。} } 3 参 https://blog.csdn.net/dizuncainiao/article/details/109990791 这个写的不好大概看看就行 但不知道为啥忽然就懂了 4 参 https://segmentfault.com/a/1190000004581945 这里更详细了一下apply的妙用性原理     清除浮动 【首先解释部分】 eg：父topDiv 浮动floatDiv （左浮）子textDiv / 父的兄弟bottomDIv 首先 textDiv设置clear left （1）通过上面的样式，.textDiv告诉浏览器，我的左边不允许有浮动的元素存在，请清除掉我左边的浮动元素。然而，因为浮动元素（.floatDiv）位置已经确定，浏览器在计算.textDiv的位置时，为满足其需求，将.textDiv渲染在浮动元素下方，保证了.textDiv左边没有浮动元素。同时可以看出，父元素的高度也被撑起来了，其兄弟元素的渲染也不再受到浮动的影响，这是因为.textDiv仍然在文档流中，它必须在父元素的边界内，父元素只有增加其高度才能达到此目的，可以说是一个意外收获。(clear的值为both也有相同的效果，通俗理解就是，哪边不允许有浮动元素，clear就是对应方向的值，两边都不允许就是both) （2）如果先孩子，再float元素（不行，因为先确定子元素，浮动另起一行就影响不到了）（所以也有个局限，最好的还是用空的代替） .textDiv的位置先确定了，于是浮动元素就紧接着.textDiv下方渲染在父元素的左侧。然而，父元素的高度并没有被撑起来，没有将浮动影响“内化”，导致浮动影响到了接下来的元素排版。 实际上，这里主要是为了清除浮动，撑起来父元素是个附属品 （3）根据这个思路，因为不能确定是否父元素的最后一个元素能否做到clearboth 更为通用的是添加一个blank来清除

 <div class="blankDiv"></div>

注意必须是块级元素，否则无法撑起父级元素高度。 （是因为为了满足这个块级的clear要求，父元素额外定位的，行内的话就没有高度了） （4）同样的 原理 只是利用伪元素来做都不用加新元素了 原理是，想让after的左边也没有伪元素，这样兄弟就正常了，底部和父元素的边框也正常了， 可以看到before是完了才另起一行的，after才能碰到float，所以就在after身上设置clear both 设置block是必须要有高度才能有能力撑起来，哪怕高度是0，也是有那个能力在的…… 如果是行内的话就直接被忽略了块元素不会！ （5）父元素  overflow: auto; 这里的overflow值，可以是除了"visible"之外的任何有效值 副作用比如，scroll值会导致滚动条始终可见，hidden会使得超出边框部分不可见等 因为bfc：BFC在计算高度的时候，内部浮动元素的高度也要计算在内。也就是说，即使BFC区域内只有一个浮动元素，BFC的高度也不会发生塌缩，高度是大于等于浮动元素的高度的。 display inline -block也可以bfc，但是 在各种构建BFC的方式中，overflow方式可能是外部影响更可控的一种所以也是最常用 【其次解决方案】
解决方案：看了半天，一般这三个是最主流的： （1）比如有三个浮动的元素，再加一个浮动的子元素，并设置clear: both 语义化不太好 （2）父元素overflow：hidden，形成bfc（scroll也可以） （3）父元素伪元素

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/content:"";display:block;clear:both;}.clearfix{*zoom:1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/}

其他的bfc会有一些问题（子元素它确实没有影响到外部了，这个影响是父元素影响到了外部） QAQ bfc呢，也是 overflow（不是visible） display flex 、inline-block position（ab，fix） float（right left （但首先bfc有一些问题，尤其是下面那两个，其次你讲bfc太混乱了人家不懂） 参考 https://juejin.cn/post/6844903504545316877#heading-4 和js比起来，css弄清除了原理已经算很简单了。。    附赠补充： 1、伪类  伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。
伪元素 表现得是像你往标记文本中加入全新的HTML元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号::（早期单冒号 但是双冒号更规范哦）
比如::first-line可以精准自适应选中第一行 ::before  这些伪元素的更推荐的用法是插入一个图标，例如下面的示例加入的一个小箭头，作为一个视觉性的提示，而且我们并不希望屏幕阅读器读出它。    

标签：浮动,bfc,clear,元素,高度,textDiv,call,链接,CSS
来源： https://www.cnblogs.com/lx2331/p/15195029.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。