CSS笔记(黑马程序员pink老师前端)浮动,清除浮动-编程知识

CSS笔记(黑马程序员pink老师前端)浮动,清除浮动

浮动可以改变标签的默认排列方式。浮动元素常与标准流的父元素搭配使用.
网页布局第一准则:多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

浮动特性

1.浮动元素会脱离标准流(脱标)
脱离标准普通流的控制,移动到指定位置,且浮动的盒子不再保留原先的位置
当为粉色div设置浮动后,其原有的位置空出,表现为压住了原来在其下方的蓝色div.
在这里插入图片描述
浮动元素只能影响在其后面的标准流
粉色div为标准流独占一行,蓝色div另起一行且浮起不占原有位置,绿色标准流div占据蓝色div的原有位置.

粉色浮动,蓝色标准流div占据其原有位置且独占一行,绿色浮动div另起一行浮动显示.
在这里插入图片描述

2.浮动的元素会一行内显示并且元素顶部对齐
若父级元素的宽度不够,则会自动换行,另起一行重新对齐排列.
在这里插入图片描述

3.浮动的元素会具有行内块元素的特性
任何元素都可以浮动,浮动的元素会具有行内块元素的特性.

清除浮动

由于父级盒子很多情况下，不方便给高度，最好由子元素撑开. 但是子盒子浮动又不占有位置，当不设置父级盒子高度时，就会影响下面的标准流盒子,所以需要清除浮动
在这里插入图片描述
1.额外标签法:浮动元素的末尾添加一个清除浮动的空标签(必须是块元素).

<div style="clear: both;"></div>

2.为父元素添加 overflow:hidden;(属性值为auto或者scroll也可) 缺点是无法显示溢出的部分
3.:after伪元素法,相当于额外标签法的升级版,在父元素里面的最后添加了一个空的块元素.优点是没有真的增加标签,结构简单.

.clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {/* IE6,7专有 */*zoom: 1;
}

4.双伪元素清除浮动,代码比伪元素法稍简洁.

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><style>* {margin: 0;padding: 0;}li {list-style: none;}.top {width: 630px;background-color: pink;margin: 10px auto;}.top ul li {float: left;width: 150px;height: 240px;background-color: skyblue;margin-right: 10px;margin-bottom: 10px;}.top ul .last {margin-right: 0px;}.bottom {background-color: aquamarine;height: 40px;}.clearfix::before,.clearfix:after {content: "";display: table;}.clearfix:after {clear: both;}.clearfix {/* IE6,7专有 */*zoom: 1;}
</style><body><div class="top clearfix"><ul><li>1</li><li>2</li><li>3</li><li class="last">4</li></ul></div><div class="bottom"></div>
</body></html>