一、浮动的基本属性

1.属性名：float

2.取值：left，right

3.作用：让垂直布局的盒子变成水平布局，如：一个在左，一个在右

二、浮动的特点：

（1）浮动元素会脱离标准流（简称：脱标），在标准流中不占位置，相当于从地面飘到了空中

（2）浮动元素比标准流高半个级别，可以覆盖标准流中的元素

（3）浮动找浮动(同方向浮动) ，下一个浮动元素会在上一个浮动元素后面左右浮动

（4）浮动元素会受到上面元素边界的影响，比如标准流

（5）浮动元素有特殊的显示效果：一行可以显示多个，可以设置宽高

（6）行内元素浮动之后,可以直接设置宽高,块级元素浮动之后,宽高由内容默认撑开

（7）注意点：浮动的元素不能通过text-align:center或者margin:0 auto

三、浮动布局的注意点

1. 浮动一般情况下和标准流的父盒子一起搭配使用.

（1）先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

（2）标准流:垂直布局;浮动:水平布局

2.浮动的时候,当父元素装不下浮动的子元素时,子元素会换行显示

3.一个元素浮动了，理论上其余的兄弟元素也要浮动. 一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题

4.浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.

子浮父不浮,兄弟一起浮

四、清除浮动

1.为什么要清除浮动?

如果子元素浮动了，假设父元素不给高度,父元素的高度为0;此时子元素不能撑开标准流的块级父元素,原因:子元素浮动后脱标 → 不占位置

2.清除浮动的方法：

① 直接设置父元素高度

优点：简单粗暴，方便

缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块

② 额外标签法

1. 在父元素内容的最后添加一个块级元素

2. 给添加的块级元素设置 clear:both

缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

③ 单伪元素清除法

操作：用伪元素替代了额外标签： .clearfix { /* IE6、7 专有 */ *zoom: 1; }

优点：项目中使用，直接给标签加类即可清除浮动

④ 双伪元素清除法

优点：项目中使用，直接给标签加类即可清除浮动

⑤ 给父元素设置overflow : hidden

操作：直接给父元素设置 overflow : hidden

特点：优点：方便

3.清除浮动代码展示：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>清除浮动的方法</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.box {overflow: hidden;width: 800px;/* 1 给父元素设置高度 *//* height: 200px; */background-color: pink;margin: 100px auto 0;}.box div {float: left;width: 200px;height: 200px;background-color: red;}footer {height: 100px;background-color: blue;}/* 2 额外标签法 不推荐,因为会让结构变得非常复杂  */.clear {/* 清除浮动 */clear: both;}/* 3. 单伪元素清除法 */.clearfix::after {content: '';display: block;clear: both;补充代码height: 0;隐藏visibility: hidden;}/* 4.双伪元素清除法 */.clearfix::before,.clearfix::after {content: '';display: table;}.clearfix::after {clear: both;}/* 兼容低版本浏览器 */.clearfix {*zoom: 1}/* 5.overflow:hidden; *//* 为什么要清除浮动?如果子元素浮动了，假设父元素不给高度,父元素的高度为0;此时子元素不能撑开标准流的块级父元素,原因:子元素浮动后脱标 → 不占位置解决办法:给父元素高度即可,但是有些情况下是不方便给高度,例如京东的为您推荐模块*//* 清除浮动的方法: 1.给父元素设置高度(有些场景不方便设置高度 例如新闻列表 京东为您推荐)2.额外标签法(在父元素内容最后添加一个块级标签,然后再设置clear:both) 3.单伪元素(其实就是额外标签法升级版本 京东采用就是单伪元素)4.双伪元素(小米采用就是双伪元素)5.给父元素设置overflow: hidden;*/</style>
</head><body><div class="box clearfix"><div></div><div></div><!-- <p class="clear"></p> --></div><footer></footer>
</body></html>

浮动（浮动和清除浮动）相关推荐

css浮动(float)及清除浮动的几种实用方法
CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流自窗体自上而下分成一行一行,并 ...
Web前端入门学习（5）——浮动原理及清除浮动
浮动原理及清除浮动上节回顾在上节的<Web前端入门学习(4)-- 块级元素和行内元素之特征与转换>中(http://cherry360.blog.51cto.com/12176744/ ...
css --- [读书笔记] 浮动(float) 与清除浮动
说明源代码学习 1. 浮动 1.1 CSS布局的三种机制网页布局的核心 - 利用 CSS 来摆放盒子 CSS提供了3种机制来设置盒子的摆放位置: 标准流.浮动和定位. 标准流: 块级元素(div ...
html浮动代码_清除浮动与 BFC(块级格式化上下文)
BFC(Block Formatting Context)是在解决清除浮动的问题时遇到的. 一.什么是 BFC MDN: 块格式化上下文(Block Formatting Context,BFC) 是 ...
html中加入清除浮动,HTML中清除浮动的几种办法
为什么会有浮动在一张HTML里,元素的排序方式遵循文档流.即是依次排序.从上到下,从左到右依次排序. 而脱离文档流就意味着不再遵循此规则.可以通过float与positon使得元素脱离文档流,当给一 ...
css清除浮动无效,css清除浮动的处理方法
根据<精彩绝伦的css> JS Bin .news{ outline:1px solid pink } .col{ float: left; width:33%; outline:1px ...
html 清除浮动怎么写,清除浮动的css写法有哪些
本文通过图文并茂的形式给大家介绍了CSS浮动与清除浮动的实例代码,非常不错,具有一定的参考借鉴价值,,需要的朋友可以参考下一.float(浮动)是什么 float 属性定义元素在哪个方向浮动. fl ...
清除浮动php,CSS清除浮动
今天看到一篇文章关于清除浮动的,突然间脑袋短路了,咦?为什么要清除浮动?原谅我的无知,搜了下原来是这样,又倒腾出原来的笔记,唉,本来就有记录啊,而且也会经常用到,用的久了连原理都忘了.恩,防止自己再犯 ...
CSS中文档流之普通流，浮动及定位、浮动特性及清除浮动的方式、定位模式，子绝父相搭配定位方式、z-index层级
文档流: 普通流(normal flow): 字面意思是普通流或者标准流,也就是常说的文档流,指网页内标签正常是从上到下,从左到右排列的意思,css的定位机制有3种:普通流(标准流).浮动.定位. 浮 ...
CSS浮动(涉及到清除浮动)及易忽略的点
浮动float: 1.传统网页布局的三种方式: 普通流(标准流):标签按照默认方式进行排列,像块状元素(独占一行),从上向下顺序排列,eg:div,p标签.行内元素,从左到右顺序排列,像span,a, ...

浮动（浮动和清除浮动）