浮动float

最新推荐文章于 2021-12-12 15:15:59 发布

cheer_98

最新推荐文章于 2021-12-12 15:15:59 发布

阅读量157

点赞数

分类专栏：学习日常

本文链接：https://blog.csdn.net/cheer_98_/article/details/101020227

版权

学习日常专栏收录该内容

24 篇文章 0 订阅

订阅专栏

float

在CSS中，通过float属性来定义浮动，其基本语法格式如下：

选择器{float:属性值;}

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

浮动的目的是，让多个块级元素同一行显示！

标准流父级

1.子盒子浮动不会压住padding

2.浮动的元素会找最近的父级元素对齐，不会超出内边距的范围

float 浮漏特

浮：浮起来，漂浮在其他标准流盒子上面

漏：加了浮动，不占位置，原来的位置就漏给了标准流的盒子

特：特别注意，首先浮动的盒子和标准流父级搭配使用，特别注意，浮动会使元素变成行内块元素

清除浮动的方法

在CSS中，clear属性用于清除浮动，其基本语法格式如下：

选择器{clear:属性值;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

闭合浮动，

额外标签法

w3c推荐的清除浮动方法

优点:通俗易懂，书写方便

缺点：添加了许多无意义的标签，结构化更差。

clear:both

父级添加overflow属性方法

可以给父级添加overflow：hidden auto scroll

优点:代码简介

缺点：内容增多的时候，不会自动换行，无法显示溢出元素

使用after伪元素清除浮动

:after 的升级版

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        
		.box1 {
			/* height: 200px; 很多情况下，我们父级盒子，不方便给高度 考虑孩子高度会变  */
			width: 600px;
			background-color: pink;
		}
		.box2 {
			width: 600px;
			height: 240px;
			background-color: purple;
		}
		.son1 { /*  son1 和 son2 是标准流，会撑开盒子 */
			width: 150px;
			height: 100px;
			background-color: skyblue;
			float: left;
		}
		.son2 {
			width: 300px;
			height: 100px;
			background-color: hotpink;
			float: left;
		}
	/*	伪元素产生出的是  行内元素
		在整个父元素后面内容   转成块元素  
		高度为0   隐藏掉点  清除浮动*/

		.clearfix:after {
			content: ".";  /* 内容为小点， 尽量加不要空， 否则旧版本浏览器有空隙 */
			display: block;  /* 转换为块级元素 */
			height: 0; /* 高度为0 */
			visibility: hidden;  /* 隐藏盒子 */
			clear: both; /* 清除浮动 */
		}
		.clearfix {  /* ie6.7浏览器的处理方式 */
			*zoom: 1; 
			/*  * 代表ie6.7能识别的特殊符号  带有这个*的属性 只有ie6.7才执行  
			 zoom 就是ie6.7 清除浮动的方法 */
		}
        </style>
    </head>
    <body>
    <p>123</p>
	<div class="box1 clearfix">
		<div class="son1"></div>
		<div class="son2"></div>
	</div>
	<div class="box2"></div>

    </body>
</html>

优点：符合闭合浮动的思想，结构语义化正确

缺点: ie6不支持after，

使用before和after双伪元素清除浮动

清除浮动：clear:both 块级元素下移，直到两边没有浮动元素

闭合浮动：使浮动元素闭合，使父元素能够包含浮动元素，从而减少浮动影响

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
		.box1 {
			/* height: 200px; 很多情况下，我们父级盒子，不方便给高度 考虑孩子高度会变  */
			width: 600px;
			background-color: pink;
		}
		.box2 {
			width: 600px;
			height: 240px;
			background-color: purple;
		}
		.son1 { /*  son1 和 son2 是标准流，会撑开盒子 */
			width: 150px;
			height: 100px;
			background-color: skyblue;
			float: left;
		}
		.son2 {
			width: 300px;
			height: 100px;
			background-color: hotpink;
			float: left;
		}
		.clearfix:before, .clearfix:after {
			content: "";
			display: table;  /* 触发bfc 防止外边距合并 */
		}
		.clearfix:after {
			clear: both;
		}
		.clearfix {
			*zoom: 1;
		}
        </style>
    </head>
    <body>
	<div class="box1 clearfix">
		<div class="son1"></div>
		<div class="son2"></div>
	</div>
	<div class="box2"></div>

    </body>
</html>

代码更简洁

ie6 不支持:after

cheer_98

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动float

float在CSS中，通过float属性来定义浮动，其基本语法格式如下：选择器{float:属性值;}属性值描述left元素向左浮动right元素向右浮动none元素不浮动（默认值）浮动的目的是，让多个块级元素同一行显示！标准流父级1.子盒子浮动不会压住padding2.浮动的元素会找最近的父级元素对齐，不会超出内边距的范围float ...
复制链接

扫一扫