浮动-转

关于浮动清除的一些小感悟,4种方法清除浮动

如何脱离标准文档流,css中给了三种方法,使一个元素脱离标准文档流。

1.浮动。   2.绝对定位。  3.固定定位。

一、 什么是浮动呢?定义这样说:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框另一个浮动框的边框为止。 其实也就是把快级元素变成能和别的快级并排成一行。

二、浮动的的元素有4点特性:

1.浮动元素会脱离标准文档流,已经不区分快和行了。

2.浮动的元素会互相贴靠。

3.浮动的元素有“字围”的效果。

4.收缩。一个浮动的元素,如果没有设置width,那么将自动收缩为文字的宽度。

三、清除浮动的方法。

1.给浮动的元素的祖先元素加高度(父元素或祖元素)。只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的元素了,也就是说,如果盒子内部有浮动,这个盒子有高,那么妥妥的,浮动不会互相影响。所以也就清除了浮动带来的影响。浮动的元素,只能被有高度的盒子关住。但是,工作上,我们绝对不会给所有的盒子加高度,这是因为麻烦,并且不能适应页面的快速变化。(不建议使用)

.

2.clear:both;清除掉两边的浮动。但是有一个非常致命的问题,margin失效了,上下之间没有了间距。

3.隔墙法。就是在两个部分之间加一个<div>,设置一个高度。还有就是“内墙发”:就是在块里边在放一个<div>,设置高度,不仅不让后边的去追前边的,并且能给外边的<div>撑出一个高度。

注:脱标的元素是不能把父元素撑出高度滴。

外墙法:

     

内墙法:

4.overflow:hidden;  一个父元素不能被自己浮动的儿子撑出高度。但是,只要给父亲加上 overflow:hidden;那么父元素就能被儿子撑出高度了。  最最最重要的是,使用overflow:hidden;能使margin生效!你没有看错,就是酱。

    

时间: 2024-10-12 22:55:40

浮动-转的相关文章

简单的浮动窗口

简单的浮动代码,纯js代码,但不符合w3c标准,在有些HTML规范下不可行, 例如: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 具体原因不清楚,待大神告知. 完整代码如下(字母为背景测试): <html> <head> <me

浅谈CSS浮动属性

要介绍css的float浮动属性,就必须先了解一下标准文档流 标准文档流:   在没有css的干预下,块级元素独占一行,可以设置宽高,行内元素并排显示,宽高自动填充.   HTML页面的标准文档流(默认布局)是:从上到下,从左到右,遇块(块级元素)换行. float浮动属性最开始的用法是实现让目标内容被文字包裹这种在报纸上经常见到的情况,而后来大多被用来实现内容的横向并排排列, 浮动层:给元素的float属性赋值后,就是脱离文档流,进行左右浮动,紧贴着父元素(默认为body文本区域)的左右边框.

Web前端入门学习(6)——浮动例子之鉴赏

浮动例子之鉴赏 在浮动原理及清除浮动一文中(http://cherry360.blog.51cto.com/12176744/1864258),简单介绍了浮动的相关基础知识,为了巩固知识点,本篇结合代码展示关于浮动的几个常见例子. 例1:九格子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>九格子</titl

关于浮动与清除浮动

页面布局方式,主要包含:文档流.浮动层.float属性. ?html页面的标准文档流(默认布局)是:从上到下,从左到右,遇块(块级元素)换行. ?浮动层:给元素的float属性赋值后,就是脱离文档流,进行左右浮动,紧贴着父元素(默认为body文本区域)的左右边框.而此浮动元素在文档流空出的位置,由后续的(非浮动)元素填充上去:块级元素直接填充上去,若跟浮动元素的范围发生重叠,浮动元素覆盖块级元素.内联元素:有空隙就插入. ?float属性包括left(元素向左浮动).right(元素向右浮动).

CSS布局之float浮动

之前对CSS的浮动布局总是一知半解,最近开发中用的多了,对它的用法进行一些总结,以便以后忘记时可以查到.哈哈,别说我记性不好,我可是说真的,毕竟前端的知识实在是多而杂,多做笔记,遇到问题时网上搜索资料是其一,但我觉得更重要的是把你遇到的问题和解决方法记录下来..这样以后你的开发效率是多高.言归正传,对浮动进行一些记录. 1.首先,网页是一个文档流,默认按块元素和级联元素从左到右,从上至下的依次显示.而Float浮动元素,就好比是漂浮在了文档流之上,不占据文档流的位置. 如下就是不进行任何浮动的文

关于清除浮动

晚上本来想去苹果官网看看新产品,顺便看看高大上的视频,进入之后,习惯性的打开了审查元素,然后就开始研究起了苹果的代码 看到图片列表,有这样一段: 就是下面这三行代码: .promos ul:after {  clear: both; } .promos ul:before, .promos ul:after { content: ' '; display: table; } bootstrap也是这种写法. 很显然,是用来清除浮动的,和小伙伴聊了一下,说到几个有意思的地方. 说的最多的就是dis

CSS浮动(float,clear)通俗讲解

很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多,小菜没有精力从头到尾讲一遍,只能有针对性的讲解. 如果读者理解CSS盒子模型,但对于浮动不理解,那么这篇文章可以帮助你. 小菜水平有限,本文仅仅是入门教程,不当之处请谅解! 本文以div元素布局为例. 教程开始: 首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下

浮动定位

<!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> <meta http-equiv="Content-

CSS浮动的3个特性(高手绕行)

1.  浮动元素会脱离正常的文档流,按照其外边距指定的位置相对于它的上一个块级元素(或父元素)显示: 代码示例: 1 <!DOCTYPE HTML > 2 <html> 3 <head> 4 <meta charset='utf-8'/> 5 <title>浮动元素的性质</title> 6 <style type="text/css"> 7 *{ 8 margin:0; 9 padding:0; 10

网页浮动工具条

1.自动判断浏览器宽度. 当浏览器窗口小于1024时,工具条会自动隐藏 支持浏览器窗口拖拽 2.当拖动浏览器窗口大小时,工具条位置也会相应调整,始终保持贴在网页主体内容右侧. 用到的javascript代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">