float 常见用法与问题--摘抄

时间 2019-11-13

标签 float 常见用法问题摘抄栏目 CSS 繁體版

原文原文链接

float 属性绝对是众多切图仔用的最多的 CSS 属性之一，它的用法很简单，经常使用值就 left、right、none 三个，可是它的特性你真的弄懂了吗？html

我会在这里介绍我对 float 的认识与使用，以及使用过程当中遇到的问题。git

对 float 的认识

1. float 元素具备 BFC 模型特性

当给元素添加 float 属性后，元素便会具备 BFC 模型的效果。好比给内联元素 span 等添加 float 属性后，内联元素也能够设置宽高和 margin。github

2. float 与 position

当给元素添加了绝对定位 absolute 或者 fixed 后，元素的浮动效果就会消失，即使 float 属性设置在 position 属性以后。布局

3. 脱离标准文档流

浮动元素会脱离标准文档流，会给它后面的兄弟元素形成影响，若是要清楚对兄弟元素的影响，只须要给紧邻的兄弟元素添加 clear: both 就好，可是紧邻的兄弟元素的 margin 依然是相对于父元素的。spa

4. 破坏父元素高度

当父元素没有设置高度，也不是 BFC 模型时，若是给子元素添加浮动效果，那么便会形成父元素高度的坍塌。3d

要清除浮动给父元素带来的破坏效果，方案也有不少，最直接的是把父元素变成 BFC 模型的元素就行。code

不过你们使用最多的方式应该是添加一个 .clearfix 的类，不过对于这个类的写法有不少种，而我通常使用的是张鑫旭老师的方法，代码量最少：htm

.clearfix { zoom: 1; } .clearfix::after { content: ''; display: table; clear: both; }

5. float 与 padding

浮动元素不会超过父元素的内边距 padding。blog

利用第五点与第三点，咱们在方便的实现一些布局效果并减小层级嵌套。文档

好比咱们一般会遇到以下的样式布局：

代码实现：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>浮动</title> </head> <body> <div class="container"> <p class="tt">1\. 这是标题</p> <button class="btn">删除</button> <div class="con"> 这里是具体的内容 </div> </div> </body> </html>

.container { width: 400px; padding: 20px; border: 1px solid #ccc; } .tt { float: left; margin: 0; width: 200px; overflow: hidden; } .btn { float: right; } .con { padding-top: 10px; clear: both; }

标题栏既有文本也有删除等按钮，咱们直接使用 float，而下面的内容部分咱们经过 clear: both; 来让显示位置正确。标题栏部分和内容部分的间距则经过给 .con 元素添加 padding 而不是 margin 来控制，由于它的 margin 是相对于父容器的。

6. float 与 margin

两个相邻的浮动元素，当第一个浮动元素的宽度为100%时，第二个浮动元素会被挤到下面，经过添加负的 margin-left 或者 margin-right 值（绝对值最少等于它自身的宽度），可使它回到第一行。

常见布局

利用这一点，咱们也能够实现不少布局，好比：

在书写html代码时，咱们一般的习惯根据UI样式，从左往右来写代码，但有时候右侧的内容比较重要，因此它的html结构须要放在左侧内容上面，让它更早的加载。

 <div class="comment"> <!-- 右侧重要内容 --> <div class="content"> <div class="author"> <span class="name">哇哈哈</span> <span class="date">2016-78-55</span> </div> <p class="text">吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！</p> <div class="meta"> <span class="msg-tag">赞</span> <span class="msg-tag">回复</span> </div> </div> <!-- 左侧内容 --> <a href="#" class="avatar"><img src="images/header.jpg" alt="头像"></a> </div>

* {margin:0; padding:0;} li {list-style: none;} a {text-decoration: none;} body {font-family: '微软雅黑';} .wrap { width: 800px; margin: 50px auto; } .content { float: right; margin-left: 100px; } .date { font-size: 14px; color: #666; } .text { margin: 20px 0; } .avatar { float: left; margin-right: -80px; } .avatar img { width: 80px; height: 80px; border-radius: 50%; }

如上面图的效果，尽管在UI上，.content 元素在 .avatar 右边，但咱们在 html 结构中，仍然须要把 .content 元素放到 .avatar 元素前面，这个时候就能够经过给 .content 元素设置为右浮动，而后给 .avatar 元素设置左浮动，再添加负 margin-right 值，让它回到上面。

2. 右侧定宽流式布局

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>test</title> </head> <body> <div class="content"> <div class="box1"> <div class="inner"></div> </div> <div class="box2"></div> </div> </body> </html>

.content { width: 500px; overflow: hidden; } .box1 { box-sizing: border-box; float: left; width: 100%; height: 50px; padding-right: 220px; border: 1px solid #ccc; } .inner { width: 100%; height: 40px; border: 1px solid #f23; } .box2 { float: right; width: 200px; height: 30px; margin-left: -100%; border: 1px solid #2fe; }