AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

css案例学习之float浮动

2017-12-31 1256
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

代码：

复制代码 
<!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>float属性</title>
<style type="text/css">
body{
    margin:15px;
    font-family:Arial; font-size:12px;
    }

.father{
    background-color:#ffff99;
    border:1px solid #111111;
    padding:5px;                
    }

.father div{
    padding:10px;                
    margin:15px;                    
    border:1px dashed #111111;
    background-color:#90baff;
    }

.father p{
    border:1px dashed #111111;
    background-color:#ff90ba;
    }

    
.son1{
/* 这里设置son1的浮动方式*/

}

.son2{
/* 这里设置son1的浮动方式*/

}

.son3{
/* 这里设置son1的浮动方式*/

}

</style>
</head>
<body>
    <div class="father">
        <div class="son1">Box-1</div>
        <div class="son2">Box-2</div>
        <div class="son3">Box-3</div>
        <p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p>
    </div>
</body>
</html>
复制代码

 

代码：

复制代码 
<!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>float属性</title>
<style type="text/css">
body{
    margin:15px;
    font-family:Arial; font-size:12px;
    }

.father{
    background-color:#ffff99;
    border:1px solid #111111;
    padding:5px;                
    }

.father div{
    padding:10px;                
    margin:15px;                    
    border:1px dashed #111111;
    background-color:#90baff;
    }

.father p{
    border:1px dashed #111111;
    background-color:#ff90ba;
    }

    
.son1{
/* 这里设置son1的浮动方式*/
float:left;
}

.son2{
/* 这里设置son1的浮动方式*/
float:left;
}

.son3{
/* 这里设置son1的浮动方式*/
float:left;
}

</style>
</head>
<body>
    <div class="father">
        <div class="son1">Box-1</div>
        <div class="son2">Box-2</div>
        <div class="son3">Box-3</div> <!-- 当所有div都浮动的时候，块空间就不占据一行了，下面的内容会自动填充 ，div只占据属于自己的那一部分，后面的元素会自动补齐行剩余空间-->
        <p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p>
    </div>
</body>
</html>
复制代码

说明:浏览器宽度改变时，样子相应的也会改变，浮动之后，默认的占据一行的宽度没有了，剩下的是css中设置的padding、margin、width、height等效果。

代码：

复制代码 
<!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>float属性</title>
<style type="text/css">
body{
    margin:15px;
    font-family:Arial; font-size:12px;
    }

.father{
    background-color:#ffff99;
    border:1px solid #111111;
    padding:5px;                
    }

.father div{
    padding:10px;                
    margin:15px;                    
    border:1px dashed #111111;
    background-color:#90baff;
    }

.father p{
    border:1px dashed #111111;
    background-color:#ff90ba;
    }

    
.son1{
/* 这里设置son1的浮动方式*/
float:left;
}

.son2{
/* 这里设置son1的浮动方式*/
float:left;
}

.son3{
/* 这里设置son1的浮动方式*/
float:right;
}

</style>
</head>
<body>
    <div class="father">
        <div class="son1">Box-1</div>
        <div class="son2">Box-2</div>
        <div class="son3">Box-3</div>
        <p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p>
    </div>
</body>
</html>
复制代码

说明：div1、div2左浮动，div3右浮动，p文字被夹中间。

div1 div3 左浮动 div2 右浮动

 

代码：

复制代码 
<!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>float属性</title>
<style type="text/css">
body{
    margin:15px;
    font-family:Arial; font-size:12px;
    }

.father{
    background-color:#ffff99;
    border:1px solid #111111;
    padding:5px;                
    }

.father div{
    padding:10px;                
    margin:15px;                    
    border:1px dashed #111111;
    background-color:#90baff;
    }

.father p{
    border:1px dashed #111111;
    background-color:#ff90ba;
    clear:right;
    }

    
.son1{
/* 这里设置son1的浮动方式*/
float:left;
}

.son3{
/* 这里设置son3 的浮动方式*/
float:right;
}

.son2 {
/* 这里设置son2 的浮动方式*/
float:left;
}

</style>
</head>
<body>
    <div class="father">
        <div class="son1">Box-1</div>
        <div class="son2">Box-2</div>
        <div class="son3">Box-3<br/>Box-3<br/>Box-3<br/>Box-3<br/></div> <!-- 换行重新占据了三行内容 -->
        <p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p>
    </div>
</body>
</html>
复制代码

说明：有了br之后，浮动元素所在行又被重新占据了，p元素不会上来填充。

代码:

复制代码 
<!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>float属性</title>
<style type="text/css">
body{
    margin:15px;
    font-family:Arial; font-size:12px;
    }

.father{
    background-color:#ffff99;
    border:1px solid #111111;
    padding:5px;                
    }

.father div{
    padding:10px;                
    margin:15px;                    
    border:1px dashed #111111;
    background-color:#90baff;
    }

.father p{
    border:1px dashed #111111;
    background-color:#ff90ba;
    clear:right;
    }

    
.son1{
float:left;
/* 这里设置son1的浮动方式*/

}

.son2{
/* 这里设置son1的浮动方式*/

float:left;
}

.son3{
/* 这里设置son1的浮动方式*/
float:right;
}

.father .clear{
margin:0;
padding:0;
border:0;
clear:both;    }


</style>
</head>
<body>
    <div class="father">
        <div class="son1">Box-1</div>
        <div class="son2">Box-2</div>
        <div class="son3">Box-3</div>
        <div class="clear"></div>
        <p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p>

    </div>
</body>
</html>
复制代码

说明：添加一个clear:both;属性之后，之前的空当地方就会被清理掉，p元素就只能另起一行了。


本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/p/4987724.html，如需转载请自行联系原作者

文章标签：
前端开发
Web App开发
关键词：
CSS浮动
CSS float浮动
CSS案例
CSS学习
CSS float
桃子红了呐
目录
相关文章
凉凉心.
|
2月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（八）：学习transition过渡属性；本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
transition过渡属性 早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。 但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化， 让效果显得更加细腻。简单点说，就是通过鼠标经过、获得焦点，被点击或对元素任何改变中触发， 并平滑地以动画效果改变CSS的属性值。 在CSS中创建简单的过渡效果可以从以下几个步骤来实现： 在默认样式中声明元素的初始状态样式； 声明过渡元素最终状态样式，比如悬浮状态； 在默认样式中通过添加
凉凉心.
211 1
凉凉心.
|
2月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（七）：学习ransform属性；本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
transform变形 css3在原来的基础上新增了变形和动画相关属性，通过这些属性可以实现以前需要大段JavaScript才能实现的 功能。 CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换，这样的变换可以控制HTML组件 呈现出丰富的外观。 借助于位移、旋转、缩放、倾斜这4种几何变换，CSS3提供了transition动画。 transition动画比较简单，只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化，并指定动画时间，就可保证动画播放。 比transitio
凉凉心.
153 1
凉凉心.
|
2月前
|
前端开发 算法 Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（一）：CSS发展史；CSS样式表的引入；CSS选择器使用，附带案例介绍
上下文选择器(迭代选择器)：基于祖先或同胞元素选择一个元素 ID和类选择器：基于id#和class的属性值进行选择元素。 属性选择器：基于属性的有无和特征进行选择。 ①上下文选择器： 上下文选择器的语法格式：标签1 标签2{属性:值;} //注意：组合选择器和上下文选择器的区别，组合选择器以逗号隔开， 上下文选择器以空格隔开 ②特殊的上下文选择器 子选择器> : 语法格式:标签1>标签2 解释说明：标签1和标签2
凉凉心.
243 1
阿铭学Java
|
3月前
|
前端开发 JavaScript
HTML/CSS/JavaScript基础学习day03-作业
本教程通过多个实例讲解JavaScript中for循环的常见用法，包括遍历数组、元素加1、求最大值/最小值、计算平均值、过滤偶数及字符串拼接等操作，并附有代码示例和运行结果图。
阿铭学Java
63 3
凉凉心.
|
2月前
|
前端开发 算法 Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（五）：背景属性；float浮动和position定位；详细分析相对、绝对、固定三种定位方式；使用浮动并清除浮动副作用
position定位（核心） 我们讲盒模型的时候，提到了3个属性可以用来控制页面排版。 三大属性：position属性，display属性，float属性。 position 属性控制页面上元素间的位置关系。 display 属性控制页面元素是否显示或者是堆叠还是并排显示。 float 属性提供控制方法。 通过float这种控制方法，可以实现多栏布局，导航菜单等等。 position属性是干嘛用的？怎么用？有哪些属性值？ position属性控制页面上元素间的位置关系，也就是排版。 怎么用？要知道怎么用
凉凉心.
385 1
阿铭学Java
|
3月前
|
前端开发 JavaScript 算法
HTML/CSS/JavaScript基础学习day03-作业
本内容包含多个 JavaScript 编程示例，涵盖数组遍历、条件筛选、字符串处理、数值计算等常见操作，适合练习基础算法与逻辑思维。
阿铭学Java
102 5
阿铭学Java
|
3月前
|
前端开发 JavaScript
HTML/CSS/JavaScript基础学习day02-作业
本教程介绍了JavaScript基础编程练习，包括使用for循环打印数字、判断奇偶数、计算总和以及用if语句判断正数的方法。每部分均配有示例代码和运行结果图，帮助初学者理解循环与条件判断的应用。最后通过思维导图回顾所学内容，强化知识点记忆。
阿铭学Java
78 2
阿铭学Java
|
4月前
|
XML 人工智能 前端开发
HTML/CSS/JavaScript基础学习day02
阿铭学习day02内容涵盖VSCode常用插件安装与配置，如中文语言包、路径提示、Vue开发工具等，同时介绍了通义灵码AI编程助手的使用方法，提升开发效率。
阿铭学Java
72 1
阿铭学Java
|
3月前
|
前端开发 JavaScript 索引
HTML/CSS/JavaScript基础学习day04
阿铭学习JavaScript函数与对象的基础知识，包括函数定义、调用方式及参数使用，以及Array和String对象的常用操作。
阿铭学Java
89 0
阿铭学Java
|
3月前
|
JavaScript 前端开发 Java
HTML/CSS/JavaScript基础学习day03
本内容为阿铭学习JavaScript的第三天笔记，涵盖JavaScript基础概念、引入方式、基础语法、变量声明、数据类型、运算符、类型转换及流程控制语句等内容，适合初学者了解JavaScript编程语言的核心知识点。
阿铭学Java
88 0

热门文章

最新文章

  • 1
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（五）：背景属性；float浮动和position定位；详细分析相对、绝对、固定三种定位方式；使用浮动并清除浮动副作用
  • 2
    CSS兼容杂记
  • 3
    CSS-设置Footer始终在页面底部
  • 4
    CSS-盒子模型-边距合并
  • 5
    Minimit Anima – 硬件加速的 CSS3 动画插件
  • 6
    Codrops 教程：基于 CSS3 的精美模态窗口效果
  • 7
    如何用纯 CSS 创作一个小球上台阶的动画
  • 8
    Asp.net中Js、Css文件压缩辅助类
  • 9
    《响应式Web设计：HTML5和CSS3实践指南》——2.3节使用画布实现文本阴影
  • 10
    简单CSS hack：区分IE6、IE7、IE8、Firefox、Opera
  • 1
    计算 int, float, double 和 char 字节大小
    277
  • 2
    C# 字节数组与INT16,float,double之间相互转换，字符数组与字符串相互转换，
    942
  • 3
    Python系列（16）—— string类型转float类型
    498
  • 4
    魔性的float浮点数精度问题
    218
  • 5
    CSS float（浮动）
    144
  • 6
    计算 int, float, double 和 char 字节大小
    192
  • 7
    【深入理解计算机系统】int 不是整数 | float 不是实数 | 内存引用错误的例子 | 学习笔记
    277
  • 8
    C 语言实例 - 计算 int, float, double 和 char 字节大小
    200
  • 9
    float和double的区别
    676
  • 10
    Go语言浮点数完全手册 float32和float64一文掌握!
    3574

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    对象存储OSS快速上手——如何使用ossbrower2