网页布局之float

一、浮动的原理
浮动是让某元素脱离标准流,漂浮在标准流之上的一种布局方式。任何元素被设置为浮动元素后,就表明它是块级元素,拥有宽高属性。
二、浮动带来的影响
1、影响它的兄弟元素的位置
一个元素设置了浮动样式后,会影响它的兄弟元素,至于如何影响,要看它的兄弟元素是块级元素还是内联元素。如果兄弟元素是块级元素,会无视这个浮动元素,即兄弟元素和浮动元素共处同行,浮动元素会覆盖兄弟元素。除非这些 div 设置了宽度,并且父元素的宽度不足以包含它们,这样兄弟元素才会被强制换行;如果兄弟元素是内联元素,则会尽可能围绕浮动元素。
2、会导致父元素高度自动清零
浮动元素脱离了普通流,导致父元素高度塌陷。
闭合浮动:使浮动元素闭合,从而减少浮动带来的影响。
三、闭合浮动的方法大体分为两类
1、利用clear属性。可以通过在浮动元素末尾添加一个带有clear: both属性的空div 来闭合元素,也可以通过:after伪元素在浮动元素末尾添加一个内容为一个点并带有clear: both属性的元素来闭合元素。
A、用空div闭合浮动

.clr1{ clear:both; }
<div class="box1">
 <div class="fl">左浮动</div>
 <div class="fr">右浮动</div>
 <div style="clr1">清除浮动</div>
</div>

B、用:after伪元素闭合浮动

.clr2:after{
    clear:both;
    display:block;
    content:‘.‘;
    overflow:hidden;
    visibility:hidden;
    height:0;
} //谷歌,火狐
.clr2{
    clear:both;
    zoom:1;
} //IE
<div class="box2 clr2">
 <div class="fl">左浮动</div>
 <div class="fr">右浮动</div>
</div>

2、触发该浮动元素父元素的BFC,使其父元素可以包含浮动元素。
A、给浮动元素的父元素添加浮动,不建议采用。
B、给浮动元素的父元素添加display: table-cells,这样会改变盒子模型,也不建议使用。
C、把浮动元素的父元素overflow属性设为hidden或auto,可以闭合浮动。另外在IE6中还需要触发hasLayout,例如为父元素设置容器宽高或设置zoom:1。

时间: 2024-10-12 18:51:56

网页布局之float的相关文章

比float更好的网页布局之inline-block

一:网页布局发展历程 表格布局 表格+css div+css的浮动布局 div+css的内联块布局 二:流行多年的浮动布局的优劣 优势: div+css浮动布局的优势,主要是相对于table布局来说的,主要表现为以下几个方面: 1,更快的网页呈现速度: 2,更佳的后台编程支持度: 3,更好的搜索引擎友好性: 4,更优的网页修改重构性. 劣势: 1,一行盒子的高度有出入可能导致将下一行的盒子"卡住 ",像俄罗斯方块放错地方的时候被"卡住"后下面空出一块空间: 2,浮动

网页布局基础

网页布局基础     简介 什么是网页布局?    网页布局是网页制作的基础,使用DIV+CSS布局网页是基础中的基础.三种基本布局方式:流式布局,浮动布局,绝对定位布局. 网页设计的特点:1:网页宽度可变  2头+内容主体(根据需要分栏)+页脚(不重要的内容)   对长度设置百分比可实现网页自适应 W3C标准包括结构化标准语言,表现标准语言,行为标准语言,倡导结构,样式,行为分离. CSS中,存在三种定位机制:标准文档流,浮动,绝对定位. 标准文档流:从上到下,从左到右输出文档内容,由块级元素

利用css进行网页布局

网页布局: 又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合,将理性的思维个性的化的表现出来,是一种具有个人艺术特色的视觉传达方式.传达信息的同时有美感.网页设计特点(相对纸媒来说).特点:1.网页可以自适应宽度2.网页的长度理论上可以无限延长3:页面为:头部,主体部分,底部. 分栏又称为分列:一列布局 二列布局 三列布局 以及混合布局(用的最多),布局通过浮动和定位来完成(实现UI界面效果). 一列布局: body{margin:0;parding:0;}清除默认样式,各个浏览

14.1 “1-2-1”变宽度网页布局

在上一章中,对固定宽度的页面布局傲了比较深入地分析和讲解.在本章中,将对变宽度的页面布局做进一步的分析.变宽度的布局要比固定宽度的布局复杂一些,根本的原因在于,宽度不确定,导致很多参数无法确定.因此.必须使用一些技巧来完成. 这里将介绍一些国外的CSS领域著名的设计师的研究成果,并对变宽度网页布局的总体情况进行归纳.希望读者能够保持清晰的思路,这样在实际工作中遇到具体的案例时,就可以灵活地选择解决方法.lodidance.com “1-1-1”布局过于简单,因此这里就不再介绍了.我们从“1-2-

DIV+CSS网页布局常用的一些基础知识整理

CSS命名规范一.文件命名规范 全局样式:global.css:框架布局:layout.css:字体样式:font.css:链接样式:link.css:打印样式:print.css: 二.常用类/ID命名规范页 眉:header内 容:content容 器:container页 脚:footer 版 权:copyright 导 航:menu主导航:mainMenu子导航:subMenu 标 志:logo标 语:banner标 题:title侧边栏:sidebar 图 标:Icon注 释:note

简单实用的CSS网页布局中文排版技巧

由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单实用的技巧,希望对大家有所帮助. 一.如何设定文字字体.颜色.大小等 font-style设定斜体,比如font-style:italic font-weight设定文字粗细,比如font-weight:bold font-size设定文字大小,比如font-size:12px line-heigh

【css3网页布局】flex盒子模型

1.0 前言 网页布局(layout)是CSS的一个重点应用. 经典布局类型: 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能,成为了现下最流行的布局方式. Flex布局是什么? Flex是Flexible

PHP.4-DIV+CSS标准网页布局准备工作(下)

DIV+CSS标准网页布局准备工作 区块属性(区块模型) 属 性 描 述 Margin(注) 是定义区块外边界与上级元素距离的属性,用1到4个值来设置元素的边界,每个值都是长度.百分比或者auto,百分比值参考上级元素的宽度,允许使用负值边际.如果四个值都给出了,它们分别被应用于上.右.下和左边界.如果只给出一个值,它被应用于所有边界.如果两个或三个值给出了,省略了的值与对边相等.注意如果边界在垂直方向邻接(重叠)了,会改用其中最大的那个边界值.而水平方向则不会.也可以选择使用上边界margin

(14)网页布局剖析与制作(下)

本篇学习资料主要讲解:       以变宽度的网页布局进行深入剖析,{以浏览器窗口为基准 或者 以父级div为基准}. 变宽度的布局要比固定宽度的布局复杂一些,原因是宽度不确定,导致很多参数无法确定,需要使用一些技巧来完成,下面将介绍一些通用的方法,预防未来在实际的工作中遇到具体的案列时,就可以灵活地选择解决方法. (1)1-2-1等比例变宽布局 这里先看效果图,然后再给出“ 1-2-1 等比例变宽布局布局”案例,以便大家都能现有一个感官上的认识,再往下看就会容易很多:如下图: 等比例布局图 (