css3云朵漂浮的特效 云朵飘动特效html

css3父级和子级都浮动了,那还用清除浮动吗?

浮动主要会影响后面其他的非浮动元素的布局，所以父元素的浮动是必须清除的，子元素也最好清除一下，以免出现一些莫名其妙的现象。

我们可以这么来理解：浮动就像是原本在地面的一幢房子忽然漂浮在空中，这样地面上它原本占用的地皮就要被其他新建的房子占用了（这是未清除浮动的情况），如果这时候出一个硬性规定：这个房子的地皮仍然保留，其他房子不得占用，那么后面的其他房子就不需要挪位置了，所有房子的整体布局就不会发生改变（这就是清除浮动的情况）。

相关问答

Q1: qq向左滑的那个界面设计

!doctype html

html

head

meta charset="utf-8"

title左划出现删除按钮，右滑隐藏/title

script type="text/javascript" src="jquery-1.8.3.min.js"/script

script type="text/javascript"

$(document).ready(function(e) {

// 设定每一行的宽度=屏幕宽度+按钮宽度

$(".line-scroll-wrapper").width($(".line-wrapper").width() + $(".line-btn-delete").width());

// 设定常规信息区域宽度=屏幕宽度

$(".line-normal-wrapper").width($(".line-wrapper").width());

// 设定文字部分宽度（为了实现文字过长时在末尾显示...）

$(".line-normal-msg").width($(".line-normal-wrapper").width() - 280);

// 获取所有行，对每一行设置监听

var lines = $(".line-normal-wrapper");

var len = lines.length;

var lastX, lastXForMobile;

// 用于记录被按下的对象

var pressedObj;

// 用于记录按下的点

var start;

// 网页在移动端运行时的监听

for (var i = 0; i len; ++i) {

lines[i].addEventListener('touchstart', function(e){

lastXForMobile = e.changedTouches[0].pageX;

pressedObj = this; // 记录被按下的对象

// 记录开始按下时的点

var touches = event.touches[0];

start = {

x: touches.pageX, // 横坐标

y: touches.pageY // 纵坐标

};

});

lines[i].addEventListener('touchmove',function(e){

// 计算划动过程中x和y的变化量

var touches = event.touches[0];

delta = {

x: touches.pageX - start.x,

y: touches.pageY - start.y

};

// 横向位移大于纵向位移，阻止纵向滚动

if (Math.abs(delta.x) Math.abs(delta.y)) {

event.preventDefault();

}

});

lines[i].addEventListener('touchend', function(e){

var diffX = e.changedTouches[0].pageX - lastXForMobile;

if (diffX -150) {

$(pressedObj).animate({marginLeft:"-132px"}, 500); // 左滑

} else if (diffX 150) {

$(pressedObj).animate({marginLeft:"0"}, 500); // 右滑

}

});

}

// 网页在PC浏览器中运行时的监听

for (var i = 0; i len; ++i) {

$(lines[i]).bind('mousedown', function(e){

lastX = e.clientX;

pressedObj = this; // 记录被按下的对象

//alert(pressedObj+'--'+lines[0]);

});

$(lines[i]).bind('mouseup', function(e){

var diffX = e.clientX - lastX;

if (diffX -150) {

$(pressedObj).animate({marginLeft:"-132px"}, 500); // 左滑

} else if (diffX 150) {

$(pressedObj).animate({marginLeft:"0"}, 500); // 右滑

}

});

}

});

/script

style type="text/css"

* { margin: 0; padding: 0; }

.line-wrapper { width: 100%; height: 144px; overflow: hidden; font-size: 28px; border-bottom: 1px solid #aaa; }

.line-scroll-wrapper { white-space: nowrap; height: 144px; clear: both; }

.line-btn-delete { float: left; width: 132px; height: 144px; }

.line-btn-delete button { width: 100%; height: 100%; background: red; border: none; font-size: 24px; font-family: 'Microsoft Yahei'; color: #fff; }

.line-normal-wrapper { display: inline-block; line-height: 100px; float: left; padding-top: 10px; padding-bottom: 10px; }

.line-normal-icon-wrapper { float: right; width: 120px; height: 120px; margin-right: 12px; }

.line-normal-icon-wrapper img { width: 120px; height: 120px; }

.line-normal-avatar-wrapper { width: 100px; height: 124px; float: left; margin-left: 12px; }

.line-normal-avatar-wrapper img { width: 92px; height: 92px; border-radius: 60px; }

.line-normal-left-wrapper { float: left; overflow: hidden; }

.line-normal-info-wrapper { float: left; margin-left: 10px; }

.line-normal-user-name { height: 28px; line-height: 28px; color: #4e4e4e; margin-top: 7px; }

.line-normal-msg { height: 28px; line-height: 28px; overflow:hidden; text-overflow:ellipsis; color: #4e4e4e; margin-top: 11px; }

.line-normal-time { height: 28px; line-height: 28px; color: #999; margin-top: 11px; }

/style

/head

body

div class="line-wrapper"

div class="line-scroll-wrapper"

div class="line-normal-wrapper"

div class="line-normal-left-wrapper"

div class="line-normal-avatar-wrapper"img src="1.jpg" //div

div class="line-normal-info-wrapper"

div class="line-normal-user-name"蜡笔小新/div

div class="line-normal-msg"在同行的小伙伴中提到了你/div

div class="line-normal-time"1分钟前/div

/div

/div

div class="line-normal-icon-wrapper"img src="5.jpeg"//div

/div

div class="line-btn-delete"button删除/button/div

/div

/div

div class="line-wrapper"

div class="line-scroll-wrapper"

div class="line-normal-wrapper"

div class="line-normal-left-wrapper"

div class="line-normal-avatar-wrapper"img src="2.jpeg" //div

div class="line-normal-info-wrapper"

div class="line-normal-user-name"乔巴/div

div class="line-normal-msg"你看不到我哦/div

div class="line-normal-time"1分钟前/div

/div

/div

div class="line-normal-icon-wrapper"img src="6.jpg"//div

/div

div class="line-btn-delete"button删除/button/div

/div

/div

div class="line-wrapper"

div class="line-scroll-wrapper"

div class="line-normal-wrapper"

div class="line-normal-left-wrapper"

div class="line-normal-avatar-wrapper"img src="3.jpg" //div

div class="line-normal-info-wrapper"

div class="line-normal-user-name"贱行贱远/div

div class="line-normal-msg"回忆里想起模糊的小时候，云朵漂浮在蓝蓝的天空，那时的你说，要和我手牵手，一起走到时间的尽头/div

div class="line-normal-time"1分钟前/div

/div

/div

div class="line-normal-icon-wrapper"img src="7.jpg"//div

/div

div class="line-btn-delete"button删除/button/div

/div

/div

div class="line-wrapper"

div class="line-scroll-wrapper"

div class="line-normal-wrapper"

div class="line-normal-left-wrapper"

div class="line-normal-avatar-wrapper"img src="4.jpg" //div

div class="line-normal-info-wrapper"

div class="line-normal-user-name"小黄人/div

div class="line-normal-msg"哈哈哈哈哈……暑假来看小黄人电影哦~哈哈哈……/div

div class="line-normal-time"1分钟前/div

/div

/div

div class="line-normal-icon-wrapper"img src="8.jpg"//div

/div

div class="line-btn-delete"button删除/button/div

/div

/div

/body

/html

Q2: css3过渡元素怎么向上漂浮

css3过渡元素怎么向上漂浮

早以前就接触过CSS，但对于浮动始终非常迷惑，可能是自身理解能力差，也可能是没能遇到一篇通俗的教程。

前些天小菜终于搞懂了浮动的基本原理，迫不及待的分享给大家。

写在前面的话：

由于CSS内容比较多，小菜没有精力从头到尾讲一遍，只能有针对性的讲解。

如果读者理解CSS盒子模型，但对于浮动不理解，那么这篇文章可以帮助你。

小菜水平有限，本文仅仅是入门教程，不当之处请谅解！

本文以div元素布局为例。

教程开始：

首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。如下图：

可以看出，即使div1的宽度很小，页面中一行可以容下div1和div2，div2也不会排在div1后边，因为div元素是独占一行的。

注意，以上这些理论，是指标准流中的div。

小菜认为，无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。

显然标准流已经无法满足需求，这就要用到浮动。

浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。

例如，假设上图中的div2浮动，那么它将脱离标准流，但div1、div3、div4仍然在标准流当中，所以div3会自动向上移动，占据div2的位置，重新组成一个流。如图：

从图中可以看出，由于对div2设置浮动，因此它不再属于标准流，div3自动上移顶替div2的位置，div1、div3、div4依次排列，成为一个新的流。又因为浮动是漂浮在标准流之上的，因此div2挡住了一部分div3，div3看起来变“矮”了。

这里div2用的是左浮动(float:left;)，可以理解为漂浮起来后靠左排列，右浮动(float:right;)当然就是靠右排列。这里的靠左、靠右是说页面的左、右边缘。

如果我们把div2采用右浮动，会是如下效果：

此时div2靠页面右边缘排列，不再遮挡div3，读者可以清晰的看到上面所讲的div1、div3、div4组成的流。

目前为止我们只浮动了一个div元素，多个呢？

下面我们把div2和div3都加上左浮动，效果如图：

同理，由于div2、div3浮动，它们不再属于标准流，因此div4会自动上移，与div1组成一个“新”标准流，而浮动是漂浮在标准流之上，因此div2又挡住了div4。

咳咳，到重点了，当同时对div2、div3设置浮动之后，div3会跟随在div2之后，不知道读者有没有发现，一直到现在，div2在每个例子中都是浮动的，但并没有跟随到div1之后。因此，我们可以得出一个重要结论：

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。

div的顺序是HTML代码中div的顺序决定的。

靠近页面边缘的一端是前，远离页面边缘的一端是后。

css3云朵漂浮的特效的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于云朵飘动特效html、css3云朵漂浮的特效的信息别忘了在本站进行查找喔。