CSS浮动布局-float

CSS浮动布局-float

---

学习页面布局，浮动会是大家经常用到的属性，在好多排版布局中都是用到的浮动，比如说下面这些地方都应用到了浮动。

一：首先我们说下什么是浮动？ 浮动：使得元素脱离文档流，按照指定的方向(左或右发生移动)，直到它的边缘碰到包含框或另一个浮动框为止。 二：属性 float:left; 左浮动 float:right; 右浮动 三：浮动时 下面用一个小例子来讲解浮动，css样式给了一个宽、高和背景颜色

1.左浮动 float:left; 给里面的四个p标签float:left; 会发现他们按照顺序排列成一排

2.右浮动 float:right 给里面的四个p标签float:right;会发现他们按照顺序排列成一排

3.这一次我们只给第二个p标签浮动 会发现3在2的后面

4.给4一个浮动，他会没有什么变化，因为浮动只会影响他后面的元素，如果上面的元素不浮动，他也不会上去的！这个很重点哦~

5.浮动对文字的影响，我们现在给1框浮动 浮动框只会占据自己的位置，使得文字可以围绕浮动框显示

6.浮动后特性~ 1.块级元素可以横排排列 2.行内元素可以设置宽和高 3.元素没有设置宽和高时，宽度为内容撑开宽 4.支持使用元素margin 5.脱离文档流 问题：不支持margin：auto

关于清除浮动目前有几大方法，需要的小伙伴可以评论喊我~

转载于:https://juejin.im/post/5ccdab696fb9a032453bbe74