1.浮动
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
元素的水平方向浮动，意味着元素只能靠左或者靠右。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。
如果图像是左浮动，下面的文本流将环绕在它右边：
2.伪元素
伪元素:通过CSS模拟出标签的效果
伪元素 作用
::before 在父元素内容前加一个伪元素
::after 在父元素内容最后加一个伪元素
必须要有content属性
伪元素默认是行内元素
3.标准流
块级元素独占一行->垂直布局
行内元素/行内块元素 一行可以显示多个 水平布局
4.行内块元素的问题
接下来讲一下行内块元素的会出现的问题:
Title
</code></div><div><code> div{</code></div><div><code> width: 100px;</code></div><div><code> height: 60px;</code></div><div><code> display: inline-block;</code></div><div><code> }</code></div><div><code> .one{</code></div><div><code> background-color: skyblue;</code></div><div><code> }</code></div><div><code> .two{</code></div><div><code> background-color: grey;</code></div><div><code> }</code></div><div><code>
这个是div换行写的效果
这个是不换行写的效果
如果想要换行写且要两个盒子之间没有空格,就需要用到浮动
5.浮动的作用
Title
</code></div><div><code> div{</code></div><div><code> width: 100px;</code></div><div><code> height: 60px;</code></div><div><code> display: inline-block;</code></div><div><code> }</code></div><div><code> .one{</code></div><div><code> background-color: skyblue;</code></div><div><code> /*设置浮动*/</code></div><div><code> float: left;</code></div><div><code> }</code></div><div><code> .two{</code></div><div><code> background-color: grey;</code></div><div><code> /*设置浮动*/</code></div><div><code> float: left;</code></div><div><code> }</code></div><div><code>
显示效果:
6.浮动的特点
1.浮动会脱离标准流(俗称"脱标"),在标准流中不占位置
示例: Title
</code></div><div><code> .one{</code></div><div><code> width: 100px;</code></div><div><code> height: 100px;</code></div><div><code> background-color: skyblue;</code></div><div><code> }</code></div><div><code> .two{</code></div><div><code> width: 200px;</code></div><div><code> height: 200px;</code></div><div><code> background-color: grey;</code></div><div><code> }</code></div><div><code> .three{</code></div><div><code> width: 300px;</code></div><div><code> height: 300px;</code></div><div><code> background-color: greenyellow;</code></div><div><code> }</code></div><div><code>
这是不加浮动的显示效果,下面看看加了浮动的
在上面代码的基础上,给one这个类选择器加一个浮动
.one{
width: 100px;
height: 100px;
background-color: skyblue;
/*增加浮动*/
float: left;
效果:
可以看到第二个跑到了第一个div的位置,就这就是浮动的脱标现象,相当于是飞起来了.
但是蓝色的div盒子并没有把灰色div盒子的内容遮盖掉,虽然是脱标,但算是一种半脱标.
浮动的元素比标准流多半个级别,可以覆盖标准流中的元素 这也是浮动的第二个特点
此时如果再给第二个div增加浮动,会是什么效果呢
示例:
.two{
width: 200px;
height: 200px;
background-color: grey;
/*增加浮动*/
float: left;
效果
第二个div是紧靠着第一个div对齐的,浮动找浮动下一个浮动元素会在上一个元素的左右浮动 ->浮动的第三个特点
浮动的元素都是靠着最上面对齐的,这也叫顶对齐 如果不想顶对齐,也可以给盒子增加外边距实现不对齐
浮动的显示效果:
一行可以显示多个
可以设置宽高
浮动后的元素具有行内块元素的特点,但是浮动的元素之间换行写不会有缝隙
7.清除浮动
这里的清除浮动并不是把浮动的代码给清除了,而是其它元素会受到浮动的影响,我们不想让其它元素受到浮动的影响,因此我们需要清除浮动
示例:
Title
</div><div> .one{</div><div> width: 500px;</div><div> height: 300px;</div><div> background-color: pink;</div><div> margin: 0 auto;</div><div> }</div><div> .two{</div><div> width: 100%;</div><div> height: 100px;</div><div> background-color: greenyellow;</div><div> }</div><div> .three{</div><div> /*浮动*/</div><div> float: left;</div><div> width: 300px;</div><div> height: 300px;</div><div> background-color: skyblue;</div><div> margin: 0 auto;</div><div> } </div><div>
效果:
如果我想要的是绿色的盒子就在蓝色的盒子下面这个位置显示
那么如果将粉色div的高度去除掉,那么就出现以下效果:
此时按下F12检查,我们发现第一个div的长和宽为500 * 0
蓝色的div已经脱标了.因此绿色的div就跑到上面去了.这就是受到了浮动的影响
父子级关系,父元素没有高度,子元素浮动,后面的标准流盒子就会受到影响
最简单的办法就是给父元素设置高度,但是通常情况下,不会这么写
下面给大家介绍其它清除浮动的方法
方法1:额外标签
方法有两步:1.给父元素内容的最后加一个块级元素 2.给增加的这一个块级元素增加设置: clear:both
示例:
在刚才的代码上进行修改
Title
</div><div> .one{</div><div> width: 500px;</div><div> /*height: 300px;*/</div><div> background-color: pink;</div><div> margin: 0 auto;</div><div> }</div><div> .two{</div><div> width: 100%;</div><div> height: 100px;</div><div> background-color: greenyellow;</div><div> }</div><div> .three{</div><div> float: left;</div><div> width: 300px;</div><div> height: 300px;</div><div> background-color: skyblue;</div><div> }</div><div> /*清除浮动*/</div><div> .clearfix{</div><div> clear: both;</div><div> }</div><div>
效果:
这个方法不止清除了浮动,也让粉色重新显示出来了
这种方法是增加的行内元素,把原来的盒子撑开了
缺点: 增加了额外的元素,会使HTML结构变得复杂
方法2:单伪元素
这个方法是使伪元素代替了额外的标签
基本写法:
.clearfix::after{
content: '';
display: block;
clear: both;
}
补充写法(为了兼容性):
.clearfix::after{
content: '';
display: block;
clear: both;
/*在网页中看不到伪元素*/
height: 0;
visibility: hidden;
}
直接让父元素调用这个伪类选择器即可
原理是和额外标签法是一样的
方法3:双伪元素
与单伪元素写法类似
写法:
.clearfix::after,
.clearfix::before{
content: '';
display: table;
}
/*真正清除浮动的标签*/
.clearfix::after{
clear: both;
}
这里的 .clearfix::before 是为了解决外边距塌陷问题
然后让父类引用伪类选择器即可
单伪元素和双伪元素这两种清除浮动的写法,不需要背,直接拿来用即可
方法4:overflow
清除浮动还有一种特别简单的写法: 直接给父元素设置 overflow:hidden
这里就不跟大家演示了,很简单.可以自行去尝试一下
