【HTML06】浮动与清除浮动

一、浮动

浮动 是我们常用的一种布局方式

浮动可以让多个块级盒子一行没有缝隙，排列显示，经常用于横向排列盒子

1、 两个box在一行中显示，用行块变换或浮动可以解决

左浮动left 右浮动right 浮动元素必须设置宽高/

2、浮动可以做文字环绕，left实现左环绕。right实现右环绕

3、特性：

任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后都具有行块元素的性质

二、清除浮动

有浮动的地方需要括起来，对父类添加清除浮动，清除对不添加浮动的代码的影响

​ 其中清除==浮动有三种方式：

1.通过设置父级高度，来将盒子撑出

2.clear 属性

​ .clearBox{

​ clear:both;

​ }对div调用它的属性，进行外墙法或者内墙法进行隔离

​ 指定段落左侧或者右侧不允许浮动的元素

​ left：左侧不允许浮动

​ right：右侧不允许浮动

​ both： 左右两侧都不允许浮动元素

3.通过overflow:hidden清除浮动，给浮动的元素父级设置overflow：hidden

4.清除浮动的方法 写到浮动元素的父级 必用！！！！！！！！背过！！！！！！

​ .clearfix::after{

​ content: “”;

​ 内容一般用不到，但是要写上为空

​ clear:both;

​ 左右都清除

​ overflow: hidden;

​ /超出则隐藏/

​ display: block;

​ /转化为块级/

​ }

结尾：
上一篇：【HTML05】伪类和伪元素+例子使用伪元素写一个箭头
下一篇：【HTML07】css中的定位，absolute、fixed、relative