天这篇文章我们来说一下css的浮动属性（float），给块状元素添加float属性可以使其转变为行内元素，也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right)。

（1）float使用语法

css的float主要有3个属性值none、left、right，默认为none；具体的使用如下所示：

float:none; （不使用浮动）

float:left; （靠左浮动）

float:right; （靠右浮动）

（2）float使用案例

我们通过案例来实际演练一下float元素的使用技巧。

1、float:left的使用练习

我们这里创建一个导航条，导航条包含首页、关于我们、新闻中心、案例展示等栏目名称。具体的网页代码以及显示效果就如下图所示：

由上图可以看出默认的样式是竖排显示的，但是我们常见的网页导航条都是横排显示的，这时候我们就可以使用float属性来使块状元素转变为行内元素，并让居左显示。

这里我们创建一个宽度为980px的导航条，给子元素（li）添加float的属性并对齐进行填充（padding）以及外间距（margin）的润色。具体的网页代码以及显示效果就如下图所示：

网页中的显示效果：

2、float:right的使用练习

float:right顾名思义用于元素靠右对齐，我们来看下面的一个例子，我们随意写一篇文字，然后文字中插入一张图片并使图片右对齐。

我们再网页中可以看到图片已经浮动到网页的右侧中去了。

好了，本篇文章就给大家说到这里，大家可以注意看下我们使用float之后会出现什么问题，下边文章我们会给大家讲解如何清除float带来的负面影响。

每日金句：你不能拼爹的时候，你就只能去拼命！喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。

SS实现左边宽度固定，右边宽度自适应

在初级的前端面试中，这个问题算是经典之一了。当然，解决办法也不止一种。接下来，小编教童靴们实现此效果。童靴们也可以在评论区分享你们开发中用到的方法。

如果你觉得无聊的时候，那就学习吧！

关注小白前端，持续收到文章推送。

首先我们先写一下HTML部分：

以上是HTML的结构，下面我们看一下CSS样式如何定义呢？

左边元素固定像素并且浮动，右边元素设置margin-left等于左边元素的宽度。

我们在浏览器中看一下效果：

好多网站都是左侧自适应，右侧固定宽度，其实原理都是一样的。小编带大家用另一种方法实现这种效果吧！

首先，html部分是这样滴~

css部分：

左侧浮动，宽度100%。右侧设置margin-left负100%

结果是这样滴~

最后，放上小编第一次做自适应网站用到的方法：

html:

css:

如上给固定的元素加position，自适应的元素加margin-left=固定元素的宽度

最后在啰嗦一句，新来的童靴去小白前端的主页，在菜单中找以前的文章补习一下哦~

动

视觉格式化模型，大体上将页面中盒子的排列分为三种方式：

1. 常规流

2. 浮动

3. 定位

## 应用场景

1. 文字环绕

2. 横向排列

## 浮动的基本特点

修改float属性值为：

- left：左浮动，元素靠上靠左

- right：右浮动，元素靠上靠右

默认值为none

1. 当一个元素浮动后，元素必定为块盒(更改display属性为block)

2. 浮动元素的包含块，和常规流一样，为父元素的内容盒

## 盒子尺寸

1. 宽度为auto时，适应内容宽度

2. 高度为auto时，与常规流一致，适应内容的高度

3. margin为auto，为0.

4. 边框、内边距、百分比设置与常规流一样

## 盒子排列

1. 左浮动的盒子靠上靠左排列

2. 右浮动的盒子考上靠右排列

3. 浮动盒子在包含块中排列时，会避开常规流块盒

4. 常规流块盒在排列时，无视浮动盒子

5. 行盒在排列时，会避开浮动盒子

6. 外边距合并不会发生

> 如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒。

## 高度坍塌

高度坍塌的根源：常规流盒子的自动高度，在计算时，不会考虑浮动盒子

清除浮动，涉及css属性：clear

- 默认值：none

- left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方

- right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方

- both：清除左右浮动，该元素必须出现在前面所有浮动盒子的下方