标签：浮动 both 前端 元素 高度 笔记 div overflow

浮动：float

　　浮动布局是布局结构中常使用的一种布局方式。

　　浮动分为左浮动和右浮动两种；当浮动元素遇到其他浮动元素的边框或者父元素的边框的时候停止浮动，浮动元素不会发生重叠；任何元素被浮动后它的元素类型将转换为一个块元素；最最重要的是被浮动的元素会脱离文档流，即不在网页中占据位置，这也就是子元素全部浮动导致父元素出现高度塌陷的原因；

　　那么。如何解决高度塌陷的问题呢？

　　第一种：简单直接的给定父元素一个固定的高，这样即便子元素浮动，父元素也不会受到影响。（不推荐使用，只适用于父元素高度固定的情况）。

　　第二种：overflow:hidden|auto;(overflow具有自动找高的作用，要特别注意的是这种情况下，父元素是不可以设置height属性的)。(不适用于有postion定位相关的样式)

　　第三种：空div法，在浮动元素的末尾添加一个空的div，并且设置其样式为 clear：both;利用这个属性的特性来重新赋予父元素高度。

　　第四种：伪元素法：通过父元素：after{content:'',display:block;clear:both}来添加一个空元素，原理和第三种一样。

　　　　注意:

　　　　　　在IE中6、7中不兼容这种写法，需要我们手动去设置对象的缩放比列。

　　　　　　在IE6、7的写法：

　　　　　　　　父元素{zoom:1;}；

标签：浮动,both,前端,元素,高度,笔记,div,overflow
来源： https://www.cnblogs.com/yangpcsir/p/14660373.html

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