CSS浮动布局-float

410 阅读1分钟

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

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