css_float_浮动的认识和使用

文章目录

• ​​浮动​​

• ​​reference​​

• ​​Table of contents​​

• ​​float 主要作用​​
• ​​浮动实例​​

• ​​试验代码​​

• ​​float背景介绍​​
• ​​float 的基本工作方式​​

浮动

reference

• ​​Floats - Learn web development | MDN (mozilla.org)​​
• ​​浮动 - 学习 Web 开发 | MDN (mozilla.org)​​
• ​​All About Floats | CSS-Tricks - CSS-Tricks​​

Table of contents

• ​​The background of floats​​
• ​​A simple float example​​
• ​​Clearing floats​​
• ​​Clearing boxes wrapped around a float​​

• ​​Test your skills!​​
• ​​Summary​​
• ​​In this module​​

float 主要作用

• 浮动可以实现文字环绕图片(包括但不限于于图片)的效果
• 对于不兼容flex的旧浏览器实现多列布局

• 注意浮动的清除(浮动使得浮动元素脱离正常文本流,导致和正常文本流的元素见的关系变得难以控制,因此要及时清除浮动)

• 除此之外,使用flex可以更好的实现多列布局

浮动实例

• 对于列高的不同,有多中可能的处理方案能使得列高看起来是相同的
• flex在这方面会有更好的自适应性,对于flex而言,创建可控的多列布局轻而易举.

试验代码

​​float · xuchaoxin1375/webLearn - 码云 - 开源中国 (gitee.com)​​

float背景介绍

• Originally for floating images inside blocks of text, the​​​float​​​ property became one of the most commonly used tools for creating multiple column layouts on webpages.
• With the advent of flexbox and grid it’s now​​returned to its original purpose​​.
• The​​​float​​​​ property was introduced to allow web developers to implement simple layouts​​involving an image floating inside a column of text​​​(正如上图效果所示,在html中,位于文本盒子​​<p>​​​外的img元素的在渲染出来的效果,犹如图片是​​<p>​​的一个子元素), with the text wrapping around the left or right of it.
• The kind of thing you might get in a newspaper layout.

float 的基本工作方式

• float元素将浮动脱离正常文本流,同时影响到附近的元素

• float元素会吸附到父元素边缘(方向根据float的取值而定)
• 我们以​​float:left​​情况为例:
• Any content that would come below the floated element in the normal layout flow will now wrap around it instead
• filling up the space to the right-hand side of it​​as far up as the top of the floated element​​. There, it will stop.