源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

[CSS] CSS基础知识之float详解

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2016-6-12 09:56:08 | 显示全部楼层 |阅读模式
下面小编就为大家带来一篇CSS基础知识之float详解。小编觉得挺不错的, 现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉)。现对float进行更深入的学习,在此把学习心得分享给大家。

浮动的基础知识

浮动有4个属性:left(左浮动)、right(右浮动)、none(不浮动)、inherit(继承)。

浮动元素的包含块是其最近的块级祖先元素。

201606121001082.jpg

201606121001082.jpg

浮动元素会左偏移(或右偏移),直到它的外边界接触到『包含块的内边界』或『另一个浮动元素的外边界』。

201606121001083.jpg

201606121001083.jpg

浮动元素脱离了标准文档流,文字和行级元素会环绕该元素,块级元素则不受影响。

201606121001084.jpg

201606121001084.jpg

浮动一个非替换元素,必须为该元素声明一个width,否则元素的宽度趋于0。

201606121001085.jpg

201606121001085.jpg

浮动元素的margin(外边距)不会与其他元素的margin合并。

201606121001086.jpg

201606121001086.jpg

201606121001087.jpg

201606121001087.jpg

浮动的深入研究

浮动元素的顶边不可以高于包含块中先前产生的块级元素或行级元素的顶。

浮动元素之间不可重叠,如果水平方向没有足够的空间放置浮动元素,它将向下移动,直到有足够的空间或没有更多的浮动元素为止。

浮动元素不能溢出包含块的左、右、上边界,仅可溢出下边界。(浮动元素溢出下边界时,部分浏览器会增加包含块的高度,使浮动元素能够包含在包含块中,出现大片空白,导致浏览器兼容性问题。)

浮动元素设置负外边距时,虽然浮动元素看起来溢出了包含块,但实际并没有违反上述规则。

特殊情况,浮动元素比包含块更宽时,浮动元素会在偏移的反方向溢出。

浮动的负作用

背景不能显示

边框不能撑开

margin padding 不能正确显示

清除浮动的方法

CSS Code复制内容到剪贴板
  1. /* 方法1,当父包含块缩成一条时无效 */  
  2.   
  3. .clear-float2{ overflow:hidden; width:100%; }   
  4. /* 方法2,overflow:hidden属性相当于是让父级紧贴内容,这样即可紧贴其对象内内容,从而实现了清除浮动。 */  
  5.   
  6. .clear-float3{ overflow: auto; zoom: 1; }   
  7. /* 方法3,zoom是在处理兼容性问题,hidden和auto都能清除浮动,据说auto对seo更友好 */  

以上这篇CSS基础知识之float详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

原文地址:http://www.cnblogs.com/shi0090/archive/2016/06/11/5574588.html

回复

使用道具 举报

4

主题

2万

回帖

303

积分

中级会员

Rank: 3Rank: 3

积分
303
发表于 2022-9-10 04:47:43 | 显示全部楼层
老大你好你好好你好
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

69

积分

注册会员

Rank: 2

积分
69
发表于 2023-4-25 16:15:18 | 显示全部楼层
很好,谢谢分享
回复 支持 反对

使用道具 举报

7

主题

2万

回帖

398

积分

中级会员

Rank: 3Rank: 3

积分
398
发表于 2023-8-15 08:58:19 | 显示全部楼层
下载来瞧瞧
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-9-11 04:54:52 | 显示全部楼层
谢谢小Y分享
回复 支持 反对

使用道具 举报

3

主题

2万

回帖

301

积分

中级会员

Rank: 3Rank: 3

积分
301
发表于 2023-11-8 13:33:56 | 显示全部楼层
还有人在不。。。。。。。。。。啊
回复 支持 反对

使用道具 举报

5

主题

2万

回帖

69

积分

注册会员

Rank: 2

积分
69
发表于 2023-11-16 16:24:08 | 显示全部楼层
刷刷刷刷刷刷刷刷刷刷刷刷刷刷刷
回复 支持 反对

使用道具 举报

13

主题

2万

回帖

97

积分

注册会员

Rank: 2

积分
97
发表于 2023-11-26 20:41:31 | 显示全部楼层
灌灌灌灌水
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

87

积分

注册会员

Rank: 2

积分
87
发表于 2024-2-29 14:02:30 | 显示全部楼层
有什么好的服务器
回复 支持 反对

使用道具 举报

6

主题

2万

回帖

247

积分

中级会员

Rank: 3Rank: 3

积分
247
发表于 2024-3-5 23:04:13 | 显示全部楼层
还可以不错
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-23 21:10 , Processed in 0.079477 second(s), 27 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表