float浮动属性的基本常识

CSS 浮动

请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘:

再请看下图,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。

如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。

如下图所示,如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”:

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

1. 标准流中的块级盒子,宽度将会自动伸展为100%,而浮动的块级盒子,宽度
不会自动伸展,而是由内容冲开(宽度取决于内容的多少);
2.当一个盒子浮动,标准流中未浮动的其他盒子,将视浮动盒子不存在而占据
浮动盒子原来的位置(浮动盒子,会盖在这个盒子上方)。
但是,未浮动盒子中的内容,将会受到浮动盒子的宽度的影响(
为浮动盒子中的内容,不会被浮动盒子盖住)。
3.由于第二条的原因。
我们可以给受浮动影响的盒子,添加clear属性,清除掉浮动盒子对自身的影响。
clear可选值:left-清除左浮动影响,right-清除右浮动影响,
both-同时清除左右浮动造成的影响.
父盒子没有指定高度,如果子盒子没有设置浮动,则父盒子的高度
可以被子盒子撑开。
面试题可能遇到:
如果,父盒子中所有的子盒子都设置浮动,那么父盒子的高度将变为0。
【解决所有子盒子浮动,父盒子高度塌陷的问题】:
①给父盒子也添加浮动;
②给父盒子使用overflow:hidden(推荐使用)
③在父盒子最后,添加一个高度为0的空DIV,给这个DIV添加clear:both属性
清除掉浮动效果。
④可以将第三条的DIV用伪对象选择器::after实现(也可加在父盒子前,处理父盒子与子盒子上边线重合的问题)
#div4::after{
display:block;
content:“”;
height:0px;
clear:both;

时间: 2024-11-07 11:45:58

float浮动属性的基本常识的相关文章

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

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

给li设置float浮动属性之后,无法撑开外层ul的问题。(原址:http://www.cnblogs.com/cielzhao/p/5781462.html)

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

css float 浮动属性

一.相关概念介绍 1.文档流      HTML页面的标准文档流(默认布局)是:从上到下,从左到右,遇块(块级元素)换行. 2.浮动层  给元素的float属性赋值后,就是脱离文档流,进行左右浮动,紧贴着父元素(默认为body文本区域)的左右边框. 注意事项: ① 浮动元素在文档流空出的位置是由续的(非浮动)元素填充上去. ② 块级元素直接填充上去,若跟浮动元素的范围发生重叠,浮动元素覆盖块级元素 二.源代码实现方式 <!DOCTYPE html> <html lang="en

float浮动的一些基础常识

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compat

浅谈CSS浮动属性

要介绍css的float浮动属性,就必须先了解一下标准文档流 标准文档流:   在没有css的干预下,块级元素独占一行,可以设置宽高,行内元素并排显示,宽高自动填充.   HTML页面的标准文档流(默认布局)是:从上到下,从左到右,遇块(块级元素)换行. float浮动属性最开始的用法是实现让目标内容被文字包裹这种在报纸上经常见到的情况,而后来大多被用来实现内容的横向并排排列, 浮动层:给元素的float属性赋值后,就是脱离文档流,进行左右浮动,紧贴着父元素(默认为body文本区域)的左右边框.

第九篇 float浮动

float浮动 首先老师要声明,浮动这一块,和边距.定位相比,它是比较难的,但是用它,页面排版会更好. 这节课就直接上代码,看着代码去学浮动. 我们先弄一个div,给它一个背景颜色: HTML: <div id="div1">我是浮动div</div> CSS: #div1{ background-color: aquamarine; } 这里同学们能看到,div1,它占据整行,有一个背景色.那么我们先来看看给它设置一个float(浮动)属性: CSS: #di

float 浮动 文档流和文字流区别

源自:2-2 浮动的基础知识 关于float属性的脱离文档流的问题 看完视频后,教材里说的使用float浮动后,元素虽然会脱离文档流,但还处在文本流的位置当中,所以就不会出现重叠的效果吗? 下面我自己试了一下,给两个DIV分别设置了样式,而只给第一个DIV设置了float浮动属性,然而效果显示,第一个DIV覆盖了第二个DIV,出现了重叠效果,请问这是什么原理? 提问者:小小之植物06-01 1个回答 妮可妮可妮_ 06-01 已采纳 脱离文档流:也就是将元素从普通的布局排版中拿走,其他盒子在定位

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> <