浮动的用法

浮动的代码书写及用法
float:left;    左浮;
float:right;    右浮;
在编写网页时,我们可以把网页当成是一个大块,这个大块由很多小块组成。只需要把网页的每一小块的父级找准,将相应的内容和样式写进对应的模块中,就可以利用浮动将模块放在网页的相应的位置。
在使用浮动时需要注意:
1、子级浮动会导致父级的高度坍塌,若要找回高度,则需触发BFC(overflow:hidden),块级格式上下文;
2、行内元素设置浮动,会自动转为块级元素,可以设置宽高;
3、浮动文本类的标记,如果没有指定宽度,浮动后会自动折叠到最小宽度;
4、子级浮动始终在父级包含块内部,不会穿越到padding区域;
5、若父级包含包含块没有足够空间容纳子元素浮动,子级会自动换行,而不会覆盖前一个元素。
6、浮动会影响其他元素,若需要清除浮动对自身的影响,可以使用clear:lift/right/both。

时间: 2024-08-09 08:57:20

浮动的用法的相关文章

html/css中float浮动的用法

一.float基础用法示例 1.我们先建两个div盒子,设置高度.宽度和背景颜色: 最开始两个盒子在网页上的位置如下: 然后我们将红色盒子浮动到右边 然后我们会发现红色盒子浮动到了右边,但是蓝色盒子就直接上移到了原先红色盒子的位置. 然后我们将蓝色盒子也浮动到右边看看效果: 我们会发现它会紧跟着红色盒子排列,而不会受块级元素影响独占一行. 二.浮动定位的基本规则 1.当元素的float属性取值为left或right时,元素属于浮动定位; 2.若剩余空间无法放下浮动的盒子,则该盒子向下移动,直到具

css中clearfix清除浮动的用法及其原理示例介绍

clearfix的定义: .clearfix:after {}{ content: "."; /**//*内容为“.”就是一个英文的句号而已.也可以不写.*/ display: block; /**//*加入的这个元素转换为块级元素.*/ clear: both; /**//*清除左右两边浮动.*/ visibility: hidden; /**//*可见度设为隐藏.注意它和display:none;是有区别的.visibility:hidden;仍然占据空间,只是看不到而已:*/ l

javascript基础——文字变大变小className的使用及JS浮动的兼容用法

文字变大变小,详情页比较常见的那种 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文字放大缩小及className的使用</title> <style> #p1{ width: 960px;} .red ,.green{ width:400px; border:5px solid #333;

clearfix清除浮动进化史

我想大家在写CSS的时候应该都对清除浮动的用法深有体会,今天我们就还讨论下clearfix的进化史吧. clearfix清除浮动      首先,我们常用的清除浮动是这样的. .clear{clear:both;line-height:0;} 这是相当暴力有效的解决浮动的问题.但是这个用法有一个致命伤,就是每次清除浮动的时候都需要增加一个空标签来使用.这种做法如果在页面复杂的布局要经常清楚浮动的时候就会产生很多的空标签,增加了页面无用标签,不利于页面优化. 因此有很多大神就研究出了 clearf

网页开发学习笔记九: css 页面布局

文档流 块元素独占一行 行内元素在一行上显示 自上而下 浮动 float 用法 float: left | right; 特点 浮动起来 不占位置(脱标) 如果多个盒子都使用了浮动, 会在一行上显示 尽量用 display: inline-block; 来转 行内块 作用 文本绕图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title>

对clear float 的理解

之前自己对于清除浮动的用法比较模糊 ,如果用到的话,一般都是采用简单粗暴的方式解决,就是直接用overflow:hidden,但是越用久就会发现其实有BUG,这个BUG正是overflow:hidden带来的,因为细究overflow:hidden还有一个默认效果是溢出隐藏.,如果要在子元素里再添一个div,div往下移动的话,超过了子元素的高度就会做溢出隐藏处理,所以效果不佳,所以后来自学了另一种清除浮动的方法,就是伪类.clearFix:after{content:'.';height:0;

openstack nova 用户管理

用户管理      创建管理员用户      用法:      nova-manage user admin name [access] [secret]      其中access 和secret可选,没有的话系统会自动生成一个.      创建普通用户      用法:nova-manage user create name [access] [secret]      access和secret可选      删除一个存在的用户      用法: nova-manage user dele

前端基础学习分享

用a标签制作一个按钮为主线,然后围绕这个按钮,做一些效果样式等操作.附件中可以下载CSS参考手册. 一.工具 工欲善其事必先利其器.我们首先需要准备好调试工具,这里我就简单介绍几种,firefox.chrome以及IE. 1.firefox 我们用到的是firebug,非常好用,工具->附加组件.这里有一篇firebug教程. 安装好后按F12就可以直接调试了: 2.chrome chrome的调试工具默认就是自带的,也是按F12就可以出来,但这个调试工具还带了个手机的模拟器,可以用来调试手机页

css清除浮动clearfix:after的用法详解

如果外部有一个div容器,其内部div容器设置了float样式,则外部的容器div因为内部没有clear,导致不能撑开.解决方法:  CSS代码: 复制代码 代码如下: .clearfix:after { content: "." ; display: block ;height: 0 ;clear: both ;visibility: hidden ;}.clearfix{ display: inline-block; }/* Hides from IE-mac */ *html .