CSS中float的应用
来源:互联网 发布:nokia软件下载 编辑:程序博客网 时间:2024/06/09 21:10
自从工作了之后就没更新博客。 工作了之后从事了前端和后台的工作, 好多事情都要从头开始学。
刚入职不久就丢了不少很杂碎的任务给我。在刚开始调样式的时候觉得好心累, 感觉都控制不了那些样式, 又不能像做Android的XML界面那样拖来拖去, 好烦。
今天接触了一天float, 感觉还是挺多学问的。
浮动的规则:
浮动有四个属性值可以设置:
<span style="font-size:14px;">.foo{float: left | right | inherit | none}</span>
每个属性值是如何影响浮动元素在其父元素或文档内的摆放,通常是由下面的规则决定的:
浮动元素的父元素是不可见的.
浮动元素会脱离文档流,不会继续停留在其父元素内。如果一个父元素只有一个子元素,那么它将会塌陷,就像是空的一样。就表现而言,就有点类似于子元素做了绝对定位。
<span style="font-size:14px;">.parent { position: relative; padding: 10px;}.child { float: left}</span>
左浮动/右浮动元素会尽量接近父元素的顶部和左边/右边
这是左浮动/右浮动元素试图实现的“最佳”位置。
前面的元素会将浮动元素向下推。
虽然浮动元素会尽量靠近父元素的顶部,然而文档中浮动元素前面的兄弟元素会把浮动元素向下推。无论前面的元素是内联元素还是块元素。也就是说如果我们在浮动元素之前或之后有一个段落,会得到不同的结果。
段落在浮动元素之后
段落在浮动元素之前
前面的浮动元素得到更“好”的位置。
在规则2中讲到的“最佳”的位置将会给第一个被定义为浮动的元素。比如说,有多个右浮动元素,HTML中第一个定义的右浮动元素会最靠近右边, 因为那是最佳位置。
<span style="font-size:14px;"><div class="container"> <div class="right">1</div><div class="right">2</div><div class="right">3</div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p></div></span>
接近于父元素的顶部优先于左边/右边
当有多个浮动元素向同一个方向浮动时,随后的元素为了更接近父元素的顶部,将会选择远离父元素左边/右边的位置。
这就意味着多个浮动元素将尽可能并排排列,只有当父元素的宽度不能容纳它们,它们才会移动到下面。
在这个例子中,元素2比元素3拥有更好的位置
浮动元素不能延伸到它的父元素外面
左浮动的元素不会延伸到父元素的左边缘外。 左浮动的元素不应该延伸到父元素的右外边缘外,除非父元素没有剩余的空间。
清除浮动
clear 属性与 float 密切相关。它可以消除元素浮动造成的文档流的改变。它有三个属性值:
<span style="font-size:14px;">.foo {clear: left | right | both}</span>
段落清除左浮动
如果一个元素只是清除左浮动或右浮动,另一方向浮动的元素不会受此影响。
<span style="font-size:14px;"><div class="container"> <div class="left">1</div><div class="left">2</div><div class="left">3</div><div class="right">1</div><div class="right">2</div><div class="right">3</div><p class="clear-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p></div></span>
clearfix
先前有许多混乱而不合适的清浮动方法。特别是会在一些老旧浏览器导致问题。我用的一个流行的清浮动方案是用CSS实现的。下面的样式应用于浮动元素的父元素或紧随其后的兄弟元素。
<span style="font-size:14px;">.cf::after {content:"";display:table;clear:both;}</span>
- CSS中float的应用
- CSS的float属性应用
- css中float的使用说明
- CSS中float的使用说明
- CSS中float的用法
- CSS中float的要点
- css中float的作用
- CSS 浮动--float与Clear的应用
- css中float left与float right的使用说明
- css中float left与float right的使用说明
- css中float left与float right的使用说明
- css中float left与float right的使用说明
- css中float left与float right的使用说明
- css中float left与float right的使用说明
- 【转】css中float left与float right的使用说明
- CSS中float和clear的理解
- CSS中浮动(Float)的作用
- javascript中css的float特殊写法
- 面试问题之秒杀
- poj2632(模拟题)
- 深入探索透视投影变换(续)
- Cent OS6.7 安装Oracle 11Gr2出错
- Android SDK 管理器的一些心得
- CSS中float的应用
- 【STM32】Keil中Debug模式下全局变量的实时查看
- CodeBlocks中程序的多文件组织
- 立体匹配—NCC算法代码
- javascript 滚动鼠标轮改变图片大小
- ubuntu下使用strcat 出现的神奇事情
- DASI_2_Probability
- JMX监控 Tomcat Glassfish JBoss WebLogic WebSphere
- Idea快捷方式