标签：浮动 定位 float clear 元素 HTML div display

5.浮动

5.1、标准文档流

块级元素：独占一行

h1-h6 p div list ...

行内元素

span a img strong ...

行内元素可以包含在块级元素中，反之不可以

5.2、display

5.3 float

display也是一种实现行内元素排列的方式，但是通常用float

因为display是在文档内的，而float是可以飘起来的

5.4、父级边框塌陷的问题

/*
clear:right 不允许有右侧的浮动元素 如果右侧有浮动元素 就排到下面去
clear:left 不允许有左侧的浮动元素 如果左侧有浮动元素 就排到下面去
clear:both 两侧都不允许有浮动元素 如果两侧有浮动元素 就排到下面去
clear:none 可以浮动
*/

解决方案：

1. 把父块设置的足够高，可以让子块就算独占行数也能放进父块里面

2. 在底端增加一个空的div标签

   <div class="clear"></div>
   
   .clear{
   		clear:both;
   
   }
   

3.  在父级元素中增加一个 overflow:hidden;
   

4. #father:after{
       content:'';
       display:block;
       clear:both;
   }
   

小结：

• 浮动元素后面增加空的div 优势：简单 劣势：但是代码中尽量避免空的div
• 设置父元素的高度 优势：简单 劣势：元素有了固定的高度就会被限制
• overflow 优势：简单 劣势：会出现下拉 和 被切除
• 在父类后加上伪类 写法稍微复杂 但是没有副作用 推荐使用

5.5、对比

• display 方向不可控制

• float 浮动起来会脱离标准文档流，所以要解决父级边框塌陷的问题

标签：浮动,定位,float,clear,元素,HTML,div,display
来源： https://www.cnblogs.com/fangpiandang/p/15224202.html

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