本篇主要介绍float属性:定义元素朝哪个方向浮动。

目录

1. 页面布局方式:介绍文档流、浮动层以及float属性。

2. float:left :介绍float为 left 时的布局方式。

3. float:right :介绍float为 right 时的布局方式。

4. 相邻元素含有float属性:介绍相邻元素含有float属性时的布局方式。

1. 页面布局方式

页面布局方式,主要包含:文档流、浮动层、float属性。

1.1 文档流

HTML页面的标准文档流(默认布局)是:从上到下,从左到右,遇块(块级元素)换行。

1.2 浮动层

浮动层:给元素的float属性赋值后,就是脱离文档流,进行左右浮动,紧贴着父元素(默认为body文本区域)的左右边框。

而此浮动元素在文档流空出的位置,由后续的(非浮动)元素填充上去:块级元素直接填充上去,若跟浮动元素的范围发生重叠,浮动元素覆盖块级元素。内联元素:有空隙就插入。

1.3 float 属性介绍

  ① left :元素向左浮动。

  ② right :元素向右浮动。

  ③ none :默认值。

  ④ inherit :从父元素继承float属性。

1.4 示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>2.3-float属性</title>
<style type="text/css">
#a
{
background-color:Red;
height:50px;
width:100px;
}
#b
{
background-color:Yellow;
height:50px;
width:200px;
}
#c
{
background-color:Blue;
height:50px;
width:300px;
}
#d
{
background-color:Gray;
height:50px;
width:400px;
} </style>
</head>
<body>
<div id=a >div-a</div>
<div id=b>div-b</div>
<div id=c>div-c</div>
<input type="text" value="input1" />
<input type="text" value="input2" />
<input type="text" value="input3 " />
<div id=d>div-d</div>
<input type="text" value="input4 " />
</body>
</html>

2. float:left

说明:元素向左浮动。

2.1 代码变更

input2 添加:float:left

div-b 添加:float:left

div-d 添加:float:left

2.2 变更后视图

  ① 浏览器的宽度“不够长”时

    

  ② 浏览器的宽度"够长"时

    

2.3 结论

当前元素分类(float:left) 下一个紧邻元素分类(不含float) 结论
块级元素(a) 块级元素(b) b会填充a遗留下来的空间,a会和b发生重叠,a的图层在上面。
内联元素(b) b会紧跟在a的后面。并根据自身内联元素的特点,是否换行。
内联元素(a) 块级元素(b) b不会跟随a的移动。
内联元素(b) b会紧跟在a的后面。并根据自身内联元素的特点,是否换行。

3. float:right

说明:元素向右浮动。

3.1 代码变更

input2元素:添加 float:right

div-b 添加:float:right

div-d 添加:float:right

3.2 变更后视图

  ① 浏览器的宽度“不够长”时

  

  ② 浏览器的宽度"够长"时

  

3.3 结论

当前元素分类(float:right) 下一个紧邻元素分类(不包含float) 结论
块级元素(a) 块级元素(b) b会填充a遗留下来的空间,若a会和b发生重叠(父容器宽度减少),a的图层在上面。
内联元素(b) b会填充a遗留下来的空间。
内联元素(a) 块级元素(b) b不会跟随a的移动。
内联元素(b) b会填充a遗留下来的空间。

4. 相邻元素含有float属性

因内联元素的特性,最好别把内联元素与块级元素相邻使用float属性。

下面都以块级元素为例

默认视图:

4.1 float:left

    给这三个div都添加 float:left

4.1.1 视图

    ①浏览器的宽度"足够长"

    

    ②浏览器的宽度"不够长"

    

4.1.2 结论

    Ⅰ 相邻的浮动元素,left属性最前面的元素,排在最左面。

    Ⅱ 成为浮动元素后,在浮动层拥有内联元素的"特性",当多个浮动元素1排容不下时,就换行。

4.2 float:right

    给这三个div都添加 float:right

4.2.1 视图

    ①浏览器的宽度"足够长"

    

    ②浏览器的宽度"不够长"

    

4.2.2 结论

    Ⅰ 相邻的浮动元素,right属性最前面的元素,排在最右面。

    Ⅱ 成为浮动元素后,在浮动层拥有内联元素的"特性",当多个浮动元素1排容不下时,就换行。

4.3 height高度不等的块级元素

把div-a的height值设为大于div-b,三个div都添加 float:left后:

4.3.1 视图

    ①浏览器的宽度"足够长"

    

    ②浏览器宽度缩小时

    

    ③浏览器宽度进一步缩小时

    

4.3.2 结论

    Ⅰ height不相等的div浮动元素排序时,照拥有内联元素的"特性",当多个浮动元素1排容不下时,就换行。

4.3.3 解决浏览器宽度缩小变形

    把添加float的属性的div元素嵌入在一个div中,并给此div添加width和height属性。浏览器宽度缩小时,也不会发生变形。

    可参照 CSS HTML元素布局及Display属性介绍

    

End
菜单加载中...

CSS float 浮动属性的更多相关文章

  1. [转] CSS float 浮动属性

    http://www.cnblogs.com/polk6/p/3142187.html CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式: ...

  2. 【CSS学习】--- float浮动属性

    一.前言 浮动元素以脱离标准流的方式来实现元素的向左或向右浮动,并且浮动元素还是在原来的行上进行浮动的.float浮动属性的四个参数:left:元素向左浮动:right:元素向右浮动:none:默认值 ...

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

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...

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

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...

  5. 对css float 浮动的学习心得

    css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...

  6. DIV CSS float浮动

    一.浮动? #CSS样式的float浮动属性,用于设置标签对象(如:<div>标签盒子.<span>.<a>.等html标签)的浮动布局. #通过定义浮动(floa ...

  7. [Web前端] 给li设置float浮动属性之后,无法撑开外层ul的问题。

    cp from : https://www.cnblogs.com/cielzhao/p/5781462.html 最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style ...

  8. css float 浮动

    CSS Float(浮动) 什么是 CSS Float(浮动)?大理石平台价格 CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. Float(浮动),往往是用于图像, ...

  9. CSS:CSS Float(浮动)

    ylbtech-CSS:CSS Float(浮动) 1.返回顶部 1. CSS Float(浮动) 什么是 CSS Float(浮动)? CSS 的 Float(浮动),会使元素向左或向右移动,其周围 ...

随机推荐

  1. 如何一步一步用DDD设计一个电商网站(三)—— 初涉核心域

    一.前言 结合我们本次系列的第一篇博文中提到的上下文映射图(传送门:如何一步一步用DDD设计一个电商网站(一)—— 先理解核心概念),得知我们这个电商网站的核心域就是销售子域.因为电子商务是以信息网络 ...

  2. 独立开发 一个社交 APP 的架构分享 (已实现)

    (本博客为原创:http://www.cnblogs.com/linguanh/)   My BananaCloud Android Application 前言:  这算是我的第一个 完完全全 由自 ...

  3. javascript动画系列第一篇——模拟拖拽

    × 目录 [1]原理介绍 [2]代码实现 [3]代码优化[4]拖拽冲突[5]IE兼容 前面的话 从本文开始,介绍javascript动画系列.javascript本身是具有原生拖放功能的,但是由于兼容 ...

  4. JAVA回调机制解析

    一.回调机制概述     回调机制在JAVA代码中一直遇到,但之前不懂其原理,几乎都是绕着走.俗话说做不愿意做的事情叫做突破,故诞生了该文章,算是新年的新气象,新突破!     回调机制是什么?其实回 ...

  5. 高性能 TCP/UDP/HTTP 通信框架 HP-Socket v4.1.1

    HP-Socket 是一套通用的高性能 TCP/UDP/HTTP 通信框架,包含服务端组件.客户端组件和 Agent 组件,广泛适用于各种不同应用场景的 TCP/UDP/HTTP 通信系统,提供 C/ ...

  6. PHP设计模式(一)简单工厂模式 (Simple Factory For PHP)

    最近天气变化无常,身为程序猿的寡人!~终究难耐天气的挑战,病倒了,果然,程序猿还需多保养自己的身体,有句话这么说:一生只有两件事能报复你:不够努力的辜负和过度消耗身体的后患.话不多说,开始吧. 一.什 ...

  7. iosselect:一个js picker项目,在H5中实现IOS的select下拉框效果

    具体文档和demo可以访问github:https://github.com/zhoushengmufc/iosselect 移动端浏览器对于select的展示样式是不一致的,ios下是类似原生的pi ...

  8. 一个软件开发者的BPM之路

    我是小林,一名普通的软件工程师,从事BPM(业务流程管理)软件开发工作.我没有几十年的技术底蕴,无法像大牛们一样高谈阔论,品评BPM开发之道:也不是资深的流程管理专家,能与大家分析流程管理的时弊.我只 ...

  9. Android的Kotlin秘方(I):OnGlobalLayoutListener

    春节后,又重新“开张”.各位高手请继续支持.谢谢! 原文标题:Kotlin recipes for Android (I): OnGlobalLayoutListener 原文链接:http://an ...

  10. Configure a VLAN (on top of a bond) with NetworkManager (nmcli) in RHEL7

    not on top of a bond Environment Red Hat Enterprise Linux 7 NetworkManager Issue Need an 802.1q VLAN ...