html浮动的用法

简介： html浮动的用法

一.什么是浮动（float)？

浮动就是让元素可以向左或向右移动，直到它的外边距碰到其父级的内边距或者是上一个元素的外边距(这里指的上一个元素不管它有没有设置浮动，都会紧挨着上一个元素）

二.浮动（float)语法：

float:left或者right或者none或者inherit

left：让元素向左浮动

right：让元素向右浮动

none：让元素不浮动

inherit：让元素从父级继承浮动属性

三.浮动的特性

1.支持所有的css样式

2.内容撑开宽高

3.多个元素设置浮动，会排在一排

4.脱离文档流

5.提升层级半级

也就是说：一个元素设置了浮动属性后，下一个元素就会无视这个元素的存在，但是下一个元素中的文本内容依然会为这个元素让出位置使自身的文本内容环绕在设置浮动元素的周围

注意：不管是什么属性的元素，如果设置了浮动属性，该元素就变成了具有inline-block属性的元素

四.浮动的具体表现

1、如果三个元素为block元素，在未设置浮动前

html样式：

1 2 3

<div class="class1">我是块级元素1，没有设置浮动</div> <div class="class2">我是块级元素2，没有设置浮动</div> <div class="class3">我是块级元素3，没有设置浮动</div>

css样式为：

1 2 3

.class1{width:100px;height:100px;background:palegreen;} .class2{width:120px;height:130px;background:gold;} .class3{width:160px;height:180px;background:red;}