H5C3基础学习总结之浮动

为什么需要浮动?

因为很多的布局效果,标准六没办法完成,此时就需要浮动来完成布局。

因为浮动可以改变元素标签的默认排列方式。比如浮动可以让多个块级元素在一行内排列显示。

会使元素向左或向右移动,其周围的元素也会重新排列。


浮动演示

网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。

代码演示浮动效果:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.thumbnail 
{
	/*给thumbnail类添加浮动*/
	float:left;
	width:110px;
	height:90px;
	margin:5px;
}
</style>
</head>

<body>
	<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
	<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
	<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
</body>
</html>

结果:


 浮动特性

  1. 浮动元素会脱离标准流的控制(浮),移动到自动位置(动)
  2. 脱标:浮动的盒子不再保留原先的位置
  3. 浮动的元素会一行内显示并且元素顶部对齐
  4. 浮动的元素会具有行内块元素的特性
    1. 如果块级盒子没有设置宽度,这默认宽度和父级一样宽。添加浮动之后,其大小根据内容来决定
    2. 浮动的盒子中间是没有缝隙的,是紧挨在一起的

浮动布局注意点

  • 浮动和标准流的父盒子搭配:

        先用标准流的父元素排列上下位置,之后再在每个上下排列的父元素里面采取浮动布局,从而来控制子元素的左右位置。

  • 一个元素浮动,理论上其余的兄弟元素也应该需要浮动:

        一个盒子里面有多个盒子,如果其中一个盒子浮动了,其他盒子不浮动的话,可能会引起问题。此外,浮动的盒子只会影响盒子后面的标准流,不会影响前面的标准流。


清除浮动

清除浮动语法

        选择器{clear: 属性值;}

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

在是实际开发中,多使用clear: both;

清除浮动方法

  1. 额外标签法,也称为隔墙法,是W3C推荐的做法
  2. 父级添加overflow属性
  3. 父级添加after伪元素
  4. 父级添加双伪元素

额外标签法(隔墙法)清除浮动

额外标签法:会在浮动元素末尾添加一个空标签。

例如:(新的空标签必须是块级元素)

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

优点:简单。

缺点:添加许多无意义的标签,结构化较差

父级添加overflow清除浮动

可以给父级添加overflow属性,将其属性值设置为hidden、auto或scroll。

:after伪元素法

:after方式是额外标签法的升级版,也是给父元素添加

代码如下:

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

双伪元素清除浮动

也是给父元素添加,代码简介,小米,腾讯等网站都是使用此方法。代码如下:

.clearfix:before,.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom:1;
}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序猿tu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值