CSS浮动特性总结
1.假设现在CSS中没有浮动(float)属性,那么会变成一个什么样子。我们会发现,目前流行采用浮动方法实现的无论是分栏布局,还是列表排列我们都可以用其他一些CSS属性(不考虑table)代替实现,唯一一个实现不了的就是“文字环绕图片”,我是想不出来能有什么方法可以让文字环绕图片显示。好,这个替代不了的作用才是float真正的意义所在,即float属性最初被设计的时候就是用来完成文字环绕效果的。
2.运用了float的元素只能横向浮动,不能纵向浮动。当元素运用的浮动属性后,将会脱离普通文档流,起容器(父元素)讲得不到脱离普通文档流的子元素的高度。
3.对元素应用的浮动属性后,会更改元素的display属性,即将元素变为block,此时可对该元素按块模型进行处理。
4.浮动元素的后一个元素会围绕着浮动元素,典型运用是文字围绕图片,与应用的position的元素相比,浮动元素并不会遮盖后面元素。
5.浮动元素之前的元素不会受当前浮动元素的影响,,如果你想让两个块状元素并排显示,必须要让两个块状元素都应用float属性。
文章来源:艾维艾科技
CSS浮动特性总结的更多相关文章
- CSS浮动特性
float:left/right左浮动有浮动 特点: ①浮动不占位:浮动元素不占位置 ②默认排列成一行,遇到边界自动换行 ③如果有文字(没有设置浮动的元素内容)会绕着浮动元素走 <!DOCTYP ...
- css浮动(folat),清除浮动(clear)(另加两种清除浮动方式,总共三种清除浮动方式)
css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右 ...
- css浮动(float)及清除浮动的几种实用方法
CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并 ...
- Css - 浮动布局
Css - 浮动布局 浮动布局 float 取值:left | right | none 利用float属性可设置元素的浮动,虽然浮动主要是应用于块元素,但行内元素其实也可以浮动,但行内元素本来就是一 ...
- CSS 浮动和清除
CSS 浮动和清除浮动 在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这 ...
- css浮动(float)及如何清除浮动
前言: CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float)(1)html文档流 自窗体自上而下分成一行一 ...
- [CSS]CSS浮动塌陷及解决办法
一. CSS浮动 先看一个例子 <html !DOCTYPE> <head> <title>HTML2</title> <style> .d ...
- css浮动现象及清除浮动的方法
css浮动现象及清除浮动的方法 首先先明确浮动最初的定义及使用场景:实现文本环绕图片的效果. 除了用浮动外,目前暂无其他方法实现文本环绕 再来看看浮动的具体定义: 浮动的框可以左右移动,直至它 ...
- 18 12 28 css 浮动 定位
浮动 浮动特性 1.浮动元素有左浮动(float:left)和右浮动(float:right)两种 2.浮动的元素会向左或向右浮动,碰到父元素边界.其他元素才停下来 3.相邻浮动的块元素可以并在一行, ...
随机推荐
- Android的横竖屏切换
android的横竖屏切换,也会发生不少问题. 1. 锁定屏幕方向,禁止切换: 在AndroidManifest.xml中的Activity参数中加上 android:screenOrientat ...
- [MODx] 4. getResources
1. Create a chunk call 'white_content' for white content: <!-- Highlights --> <div class=&q ...
- spring源码分析之spring-web http详解
spring-web是spring webmvc的基础,它的功能如下: 1. 封装http协议中client端/server端的request请求和response响应及格式的转换,如json,rss ...
- C# 之 遍历本地文件夹下的所有文件
/// <summary> /// 遍历 rootdir目录下的所有文件 /// </summary> /// <param name="rootdir&quo ...
- 面试体验:Microsoft 篇(转)
http://www.cnblogs.com/cathsfz/archive/2012/08/14/microsoft-interview-experience.html 在上一篇<面试体验:G ...
- Android_AsyncTask_DownloadImg
layout.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xml ...
- sscanf、strsep
#include <stdio.h> #include <string.h> int main() { char token[] ="abdzxbcdefgh&quo ...
- 浅谈用java解析xml文档(一)
关于xml本身的语法及使用的环境不多说了,网上有很多规则, 然对xml文档进行解析,一般分为四种解析方式,基于java官方文档的Dom 和Sax解析,还有就是基于 第三方jar包的 Jdom 和 Do ...
- 简单的ROT13码编码与解码
ROT13码意思是将字母左移13位.如'A' ↔ 'N', 'B' ↔ 'O','V' ↔ 'I'. 下面实现ROT13码的解码. function rot13(str) { var arr = [] ...
- JS 乱记
JS 中不存在块级作用域,也就是说在全局作用域下 if ,for 语句中用 var 声明的变量是全局变量. JS 中浮点数运算的值为近似值,比如:0.1 + 0.2 不等于 0.3 ,所以避免使用浮点 ...