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>

效果如下图

ios css 样式float不生效_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>

效果图

ios css 样式float不生效_属性值_02

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>

效果如下：

ios css 样式float不生效_块级元素_03

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

就像图片中的这样，如果宽度不够，会自动换行

换行后也是自动对齐

ios css 样式float不生效_块级元素_04

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>

效果图

ios css 样式float不生效_块级元素_05


4：浮动和标准流父级搭配使用

为了约束浮动元素的位置，一般先用标准流的父元素排列上下位置，然后内部子元素采用浮动排雷

总结

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