Css样式Float 的基本用法入门篇

最新推荐文章于 2024-03-30 01:23:02 发布

二次程序猿

最新推荐文章于 2024-03-30 01:23:02 发布

阅读量1.9k

点赞数 4

文章标签： css html

本文链接：https://blog.csdn.net/qq_42121620/article/details/113529854

版权

Css样式Float的基本用法

文章目录

Css样式Float的基本用法
前言
一、浮动（float）
二、使用步骤
- 1.什么是浮动（float）
- 2.浮动的特性
总结

前言

传统网页有三种布局：标准流、浮动、定位
标准流：按照规定好的默认方式排列。
一个网页的页面基本包含了三种布局方式

提示：以下是本篇文章正文内容，下面案例可供参考

一、浮动（float）

1：为什么要浮动？
有很多布局效果，标准流没办法完成，此时就可以利用浮动完成布局，因为浮动可以改变元素标签默认的排列方式
典型应用：可以让多个块级元素一行内排列显示。
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

二、使用步骤

1.什么是浮动（float）

1.1：float属性用于创建浮动框，将其移到另一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘
1.2：语法：{float：属性值}

属性值	描述
none	元素不浮动（默认值）
left	元素左浮动
left	元素右浮动

代码如下（示例）：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>左浮动</title>
	<style>
		div{
			width: 150px;
			height: 150px;
			background-color: hotpink;
			float:left;
		}
	</style>
</head>

<body>
	<div>1</div>
	<div>2</div>
	<div>3</div>
</body>
</html>

效果如下图在这里插入图片描述
左右浮动

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>左右浮动</title>
	<style>
		.right{
			width: 150px;
			height: 150px;
			background-color: hotpink;
			float:right;
		}
		.left{
			width: 150px;
			height: 150px;
			background-color: hotpink;
			float:left;
		}
	</style>
</head>

<body>
	<div class="left">left</div>
	<div class="right">right</div>
</body>
</html>

效果图
在这里插入图片描述

2.浮动的特性

特性：
1：浮动元素会脱离标准流
1.1：浮动的盒子不在保留原先位置
1.2：脱离标准普通流控制，移动到指定位置
代码如下（示例）：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮动</title>
	<style>
		.box1{
			width: 150px;
			height: 150px;
			background-color: hotpink;
			float: left
		}
		.box2{
			width: 300px;
			height: 300px;
			background-color: skyblue;
		}
	</style>
</head>

<body>
	<div class="box1">box1</div>
	<div class="box2">box2</div>
</body>
</html>

效果如下：在这里插入图片描述

2：浮动的元素会一行内显示并且元素顶部对齐
就像图片中的这样，如果宽度不够，会自动换行
换行后也是自动对齐
在这里插入图片描述

3：浮动的元素会具有块元素的特性
3.1：行内元素有了浮动，则不需要转换块级\行内元素就可以直接给宽高
3.2：如果块级盒子没有设置宽度，默认和父级一样，但是添加浮动后大小根据内容来决定

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮动</title>
	<style>
		span,
		.box1{
			width: 150px;
			height: 150px;
			background-color: hotpink;
			float: left
		}
		p{
			background-color: coral;
			height: 200px;
			float: right;
		}
	</style>
</head>

<body>
	<div class="box1">box1</div>
	<span>1</span>
	<span>2</span>
	<p>11</p>
</body>
</html>

效果图
在这里插入图片描述
4：浮动和标准流父级搭配使用
为了约束浮动元素的位置，一般先用标准流的父元素排列上下位置，然后内部子元素采用浮动排雷

总结

这篇文章说明了浮动的基本的用法，还有很多进阶的用法我也在学习，希望这篇文章还有帮助到正在学习Css的朋友。文章有错误或者不对的地方请大家指正，谢谢大家观看。

二次程序猿

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Css样式Float 的基本用法入门篇

Css样式Float的基本用法文章目录Css样式Float的基本用法前言一、浮动（float）二、使用步骤1.什么是浮动（float）2.浮动的特性总结前言传统网页有三种布局：标准流、浮动、定位标准流：按照规定好的默认方式排列。一个网页的页面基本包含了三种布局方式提示：以下是本篇文章正文内容，下面案例可供参考一、浮动（float）1：为什么要浮动？有很多布局效果，标准流没办法完成，此时就可以利用浮动完成布局，因为浮动可以改变元素标签默认的排列方式典型应用：可以让多个块级元素一行内
复制链接

扫一扫