Float（浮动）

一.什么是浮动？

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

二.浮动元素的特点

  1. 元素浮动后会自动变成行块元素
  2. 浮动元素的父元素高度宽计算将忽略浮动子元素
  3. 浮动的元素绝对不会遮挡非浮动元素的内容（文字或图片）但会遮挡布局

三.浮动元素的目的

  1. 文字环绕图片
  2. 水平方向上的布局

四.clear元素

clear作用是清楚浮动，本质是"避让"
       注：后出现的元素避让先出现的元素。

时间： 2024-10-06 16:29:41

Float（浮动）的相关文章

CSS布局之float浮动

之前对CSS的浮动布局总是一知半解,最近开发中用的多了,对它的用法进行一些总结,以便以后忘记时可以查到.哈哈,别说我记性不好,我可是说真的,毕竟前端的知识实在是多而杂,多做笔记,遇到问题时网上搜索资料是其一,但我觉得更重要的是把你遇到的问题和解决方法记录下来..这样以后你的开发效率是多高.言归正传,对浮动进行一些记录. 1.首先,网页是一个文档流,默认按块元素和级联元素从左到右,从上至下的依次显示.而Float浮动元素,就好比是漂浮在了文档流之上,不占据文档流的位置. 如下就是不进行任何浮动的文

CSS float浮动的深入研究、详解及拓展(一)

概念目录 个人感悟之CSS代码的情感化思维 个人观点之浮动的意义仅仅是文字环绕显示而已 个人观点之浮动的本质是"包裹及破坏" 个人观点之目前大多数浮动应用都不是浮动应该做的 个人观点之浮动其实是个魔鬼.混球 一.引言 你我看待事物的方式不同,价值取向也不同,因为我们有着不同的世界观,价值观.这种世界观的差异不仅仅体现在实际的生活中,也反映在代码上.你我看待代码的方式,或者说是代码在我们情感层面的位置是不一样的,我这里说的是情感层面,与逻辑无关,与算法无关(虽然算法受情感影响).这种看待

盒子模型、网页自动居中、float浮动与清除、横向两列布局

1.CSS包含:标准文档流,浮动,绝对定位 标准文档流的特点:从上到下,从左到右,输出文档内容 盒子模型:块级元素(div ui li dl dt p)与行级元素(span strong img input) 盒子模型:边框(border)外边框(margin)内边框(padding)内容(content) 盒子3D模型:border. content+padding .background-img.background-color.margin <html> <head> <

&lt;转载&gt;如何解决子级用float浮动父级div高度不能自适应的问题

转载:http://www.kwstu.com/ArticleView/divcss_2013101582430202 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因. 如何解决父div对象自适应高度,方法有三种,接下来DIVCSS5逐一介绍. 1.首先我们先看HTML

解决子级用css float浮动 而父级div没高度不能自适应高度

解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因. 如何解决父div对象自适应高度,方法有三种,接下来DIVCSS5逐一介绍. 1.首先我们先看HTML源代码: <!DOCTYPE html> <html> <head> <meta cha

归纳篇（一）CSS的position定位和float浮动

近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.relative:生成相对定位的元素,相对于其所在普通的文档流位置进行定位: 3.static:默认值,没有定位,元素出现在正常的文档流中; 4.fixed:老IE不支持,和absolute一致,相对于窗口进行定位,当出现滚动条时,不随着滚动而滚动: 5.sticky:(CSS3)有兼

overflow解决float浮动后高度自适应问题

也许你在做网页的时候发现,发一个区块内的元素被应用了float之后,那么整个box的高度对就不以被浮动对象的高度为标准了.如图中的城市导航内的城市列表中采用了float之后,那个外框的高度并不是内容元素的高度: 怎么解决这个问题呢?经发现可以采用overflow来解决!方法是在父元素加上如下代码即可 overflow:auto; zoom:1; overflow:auto;是让高度自适应, zoom:1;是为了兼容IE6,也可以用height:1%;的方式来解决. 1 1 <!DOCTYPE h

清除float浮动造成影响的几种解决方案

1. “清除浮动” ??准确的描述应该是“清除浮动造成的影响”  学习浮动推荐的视频教程<CSS深入理解之float浮动> 2.如何清除浮动造成的影响??? 栗子 块级div元素包含一个内联img元素,此时div的高应该是图片img撑开的高度,当设置了图片img元素设置浮动后,div高度就会坍塌 浮动的破坏性 浮动导致高度坍陷代码 <!DOCTYPE html> <html lang="en"> <head> <meta chars

CSS Positioning(定位)与Float(浮动)

一.CSS Positioning(定位) 1.Positioning(定位) CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么.元素可以使用的顶部,底部,左侧和右侧属性定位.然而,这些属性无法工作,除非是先设定position属性.他们也有不同的工作方式,这取决于定位方法.有四种不同的定位方法. 2.Static 定位 HTML元素的默认值,即没有定位,元素出现在正常的流中.静态定位的元素不会受到top, bottom, lef

给li设置float浮动属性之后，无法撑开外层ul的问题。

最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查了相关内容,是因为给li设置了浮动之后它就脱离当前正常的文档流,所以没办法撑开外层ul的高度. 以下面代码为例,其实有好几种解决方法,我用的这种并不是最简单的. <!DOCTYPE html ><html ><head><meta charset="utf-