CSS浮动介绍

最新推荐文章于 2024-09-18 15:13:40 发布

小王没网

最新推荐文章于 2024-09-18 15:13:40 发布

阅读量203

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_59550482/article/details/125455740

版权

学习目标

理解为什么需要浮动

掌握浮动的排列特性

知道浮动带来的影响

掌握清除浮动的方式

一些 CSS 属性是可以有动画效果的，这意味着它们可以用于动画和过渡。

动画属性可以逐渐地从一个值变化到另一个值

普通流：

块级元素：独占一行

行内元素：不独占一行

行内和块级之间的转换就是通过display属性

如何用普通的标准让多个块级盒子（div）水平排列成一行？

比较难，虽然转换为行内块元素可以实现一行显示，但是他们之间会有大的空白缝隙，很难控制。

浮动：

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

有很多布局效果，标准流没办法完成，此时可以利用浮动完成布局，浮动可以改变元素默认的排列方式。

语法规则：

选择器{

float:属性值

}

属性值：

none:元素不浮动

left:元素左浮动

right:元素右浮动

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

浮动元素的特性：

1. 浮动元素会脱离标准流(脱标)

2. 浮动的多个元素会一行内显示并且元素顶部对齐

3．浮动的元素会具有行内块元素的特性

脱离标准普通流的控制（浮）移动到指定位置(动)，(俗称脱标)从标准流中浮动出来，不占据原来位置；浮动的盒子不再保留原先的位置

1.浮动元素会脱离标准流(脱标)

标准流：指的是在不使用其他的与排列和浮动、定位相关的特殊CSS规则时,各种元素的排列规则。

脱流：使用了浮动、定位相关的特殊规则脱离了标准流的控制浮动到了指定位置。

标准流指的是在不使用其他的与排列和定位相关的特殊CSS规则时,各种元素的排列规则

2.浮动的盒子不再保留原先的位置

设置了浮动的元素，从标准流中浮动出来，不占据原来位置

3.如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。

注意：浮动的元素是互相贴靠在一起的(不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

4. 浮动元素会具有行内块元素特性

如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定

浮动的盒子中间是没有缝隙的，是紧挨着一起的

行内元素同理

浮动的应用

应用1：浮动和标准流的父盒子搭配使用。

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

应用2：让其中一个元素浮动到想要摆放的位置。

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

高度塌陷问题：

父元素没有指定高度父元素高度是由子元素撑起来的，当子元素由于布局需要进行浮动，浮动的子元素会脱离文档流，导致子元素无法在撑起父元素，所以父元素的高度就塌陷了

解决办法：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

/* 高度塌陷：父元素没有指定高度父元素高度是由子元素撑起来的

当子元素由于布局需要进行浮动，浮动的子元素会脱离文档流，导致子元素无法在撑起父元素，所以父元素的高度就塌陷了

怎么解决：

#father{

width: 100%;

border: 10px red solid;

/* 方法一直接将父元素浮动起来*/

/* float: left; */

/* 方法二直接设置父元素的高度*/

/* height: 200px; */

/* 方法三 */

/* overflow: hidden; */

/* 方法四指定行内块元素*/

/* display: inline-block; */

}

/* 方法五指定行内块元素*/

/* #father::after{

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

} */

#father>div{

height: 200px;

width: 200px;

float: left;

}

#son1{

background-color: red;

}

#son2{

background-color: green;

}

#son3{

background-color: blue;

}

#footer{

height: 200px;

width: 100%;

background-color: yellow;

}

</style>

</head>

<body>

</div>

</body>

</html>