css浮动与清除浮动相关总结（附图解、实例）

标准流：

浏览器按照各种元素标签排版布局中的默认状态，也就是没有被其他排版浮动和定位相关的css属性干扰的就叫标准流

注意：当元素脱离标准流以后，要对位置进行调整只能用px为单位，类似：margin：100px auto;设置100px有效，auto无效

float：none | left | right
默认值：none

none：设置对象不浮动
left：设置对象浮在左边
right：设置对象浮在右边

浮动的特性：

1，浮动的元素脱离标准流，不占原来的位置

2 , 浮动的元素会被改变显示方式

3，浮动的元素以顶部对齐

4，如果浮动的元素前面是标准流是元素，那么这个浮动的元素只会跟在标准流的后面
除非通过人为去改变才能让他的位置发生变化

5，当有包含关系时，如果有子元素浮动不会跑出父盒子除非人为改变，但是有一个特殊的，就是为哪个边为参考则跑不出哪个边

清除浮动

有时浮动会造成父盒子没有高度，而浮上来的盒子会盖住下面的盒子,清除浮动不是真正清除了浮动，而是清除浮动所造成的影响.

浮动造成影响的例子：
1、2、3是浮动的盒子，背景是后加的盒子，这样三个浮动的盒子影响了后加的盒子的正常显示

清除浮动的方式：
第一种：使用clear
第二种：有包含关系，给父元素加高度
第三种：在父盒子加overflow: hidden;
第四种：额外标签法
第五种：伪元素清除浮动（这是开发中最常用的，必须记住且要能手写出这段代码）

使用clear

语法：
clear：none | left | right | both
默认值：none
适用于：块级元素
继承性：无
取值：

none：允许两边都可以有浮动对象
both：不允许有浮动对象
left：不允许左边有浮动对象
right：不允许右边有浮动对象

关于清除浮动对于设置了清除浮动的元素，它只能控制自己本身，而不能控制别人

例子：1、2、3都左边浮动的情况下对2进行clear：left的设置
此时：2左边不能有元素，所以2自己下来一格

Both时：不允许有浮动对象

说明：2号只能控制自己本身离开1号元素，三号自己跟着2号2号也没办法
解决方法：对3号元素设置clear：left；

有包含关系，给父元素加高度

如图：1、2、3浮动，将后加的盒子挡住了，此时将1、2、3嵌套进一个父盒子，并且设置父盒子与1、2、3同高度

加后效果：最大的盒子往下移了

在父盒子加overflow: hidden;

原理：触发了BFC

额外标签法

如图，在1、2、3标签后加一个块级，且标签中加上clear：both；
效果：

伪元素清除浮动

父元素的样式

.clearfix::after{content: ".";   /*加点是浏览器兼容需要*/display: block; /*没加的话高度只有”.”撑开的高度，变成块级元素
的话高度就是子元素撑开的高度*/  visibility: hidden;    /*隐藏“.”*/height: 0;              /*使父元素的高度为子元素撑开*/line-height: 0;clear: both;}.clearfix{*zoom: 1; /*为了解决低版本的IE的清除浮动的使用*/}

效果：

京东官网的实例：

css浮动与清除浮动相关总结（附图解、实例）相关推荐

前端笔记（6）css布局机制，浮动，清除浮动，图片格式，ps切片工具及插件
css样式表/层叠样式表(4) css布局的三种机制浮动浮动(float)的扩展清除浮动额外标签法(隔墙法) 父级添加overflow属性方法使用after伪元素清除浮动使用双伪元素清除浮 ...
css 浮动和清除浮动
在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这块知识的总结. 一.浮动 ...
进一步理解CSS浮动与清除浮动
本文主要探讨两个问题: 为什么CSS设置浮动会引起父元素塌陷为什么设置clear:both能清除浮动,并撑开父元素. 起因 CSS的浮动,算是我在写网页时用的最多的属性之一.但要说我对浮动的了解程度 ...
博学谷html css,博学谷 - CSS笔记12 - 清除浮动
1.为什么需要清除浮动由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为 0 时,就会影响下面的标准流盒子. 由于浮动元素不再占用原文档流的位置,所以它会对后面的元 ...
CSS基础之清除浮动
CSS基础之清除浮动本人前端菜鸟一枚,在学习 CSS 过程中发现网上流传的教程参差不齐,要么内容不够详细,要么方法就是错的.本文是在我参考了许多前辈经验的基础上编写的,如有错误的地方,请各位大牛不吝 ...
css浮动以及清除浮动
css浮动以及清除浮动 CSS的定位机制有3种:普通流(标准流).浮动和定位. 一.什么是浮动? 元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素中指定位置的过程. 选择器{f ...
CSS之浮动/BFC/清除浮动（十二）
CSS 浮动/BFC/清除浮动 1,实现 CSS 布局的几种策略 2,正常布局流(Normal Flow) 2.1,正常布局流中,块级元素的排列方式 2.2,正常布局流中, 内联元素排版方式 3,浮动 ...
Web前端，CSS中的浮动、清除浮动
前言持续总结输出中,今天分享的是Web前端,CSS中的浮动.清除浮动.浮动和清除浮动是我们常用的css样式.今天我们就来了解他们. 1.浮动的作用早期的作用:图文环绕现在的作用:网页布局 • 场 ...
CSS ：浮动与清除浮动
CSS :浮动与清除浮动 1.浮动 1.css 布局的三种机制 2.为什么需要浮动 3.什么是浮动 1.浮动口诀之浮 2.浮动口诀之漏 3.浮动口诀之特 4.浮动小结 5.浮动(float)的应用(重 ...
CSS——CSS浮动与清除浮动
文章目录浮动普通流(normal flow) 浮动(float) 什么是浮动? 浮动详细内幕特性 float 浮漏特案例:体会浮动现在就可以用float实现一些基本页面布局了链接清除浮 ...

css浮动与清除浮动相关总结（附图解、实例）

css浮动与清除浮动相关总结（附图解、实例）相关推荐

最新文章

热门文章