css案例学习之float浮动

最新推荐文章于 2024-09-20 16:06:21 发布
最新推荐文章于 2024-09-20 16:06:21 发布
阅读量108 收藏
点赞数
文章标签： xhtml
原文链接：https://yq.aliyun.com/articles/338935
版权

代码：

复制代码 
<!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>
    <title>float属性</title>
<style type="text/css">
body{
    margin:15px;
    font-family:Arial; font-size:12px;
    }

.father{
    background-color:#ffff99;
    border:1px solid #111111;
    padding:5px;                
    }

.father div{
    padding:10px;                
    margin:15px;                    
    border:1px dashed #111111;
    background-color:#90baff;
    }

.father p{
    border:1px dashed #111111;
    background-color:#ff90ba;
    }

    
.son1{
/* 这里设置son1的浮动方式*/

}

.son2{
/* 这里设置son1的浮动方式*/

}

.son3{
/* 这里设置son1的浮动方式*/

}

</style>
</head>
<body>
    <div class="father">
        <div class="son1">Box-1</div>
        <div class="son2">Box-2</div>
        <div class="son3">Box-3</div>
        <p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p>
    </div>
</body>
</html>
复制代码

 

代码：

复制代码 
<!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>
    <title>float属性</title>
<style type="text/css">
body{
    margin:15px;
    font-family:Arial; font-size:12px;
    }

.father{
    background-color:#ffff99;
    border:1px solid #111111;
    padding:5px;                
    }

.father div{
    padding:10px;                
    margin:15px;                    
    border:1px dashed #111111;
    background-color:#90baff;
    }

.father p{
    border:1px dashed #111111;
    background-color:#ff90ba;
    }

    
.son1{
/* 这里设置son1的浮动方式*/
float:left;
}

.son2{
/* 这里设置son1的浮动方式*/
float:left;
}

.son3{
/* 这里设置son1的浮动方式*/
float:left;
}

</style>
</head>
<body>
    <div class="father">
        <div class="son1">Box-1</div>
        <div class="son2">Box-2</div>
        <div class="son3">Box-3</div> <!-- 当所有div都浮动的时候，块空间就不占据一行了，下面的内容会自动填充 ，div只占据属于自己的那一部分，后面的元素会自动补齐行剩余空间-->
        <p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p>
    </div>
</body>
</html>
复制代码

说明:浏览器宽度改变时，样子相应的也会改变，浮动之后，默认的占据一行的宽度没有了，剩下的是css中设置的padding、margin、width、height等效果。

代码：

复制代码 
<!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>
    <title>float属性</title>
<style type="text/css">
body{
    margin:15px;
    font-family:Arial; font-size:12px;
    }

.father{
    background-color:#ffff99;
    border:1px solid #111111;
    padding:5px;                
    }

.father div{
    padding:10px;                
    margin:15px;                    
    border:1px dashed #111111;
    background-color:#90baff;
    }

.father p{
    border:1px dashed #111111;
    background-color:#ff90ba;
    }

    
.son1{
/* 这里设置son1的浮动方式*/
float:left;
}

.son2{
/* 这里设置son1的浮动方式*/
float:left;
}

.son3{
/* 这里设置son1的浮动方式*/
float:right;
}

</style>
</head>
<body>
    <div class="father">
        <div class="son1">Box-1</div>
        <div class="son2">Box-2</div>
        <div class="son3">Box-3</div>
        <p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p>
    </div>
</body>
</html>
复制代码

说明：div1、div2左浮动，div3右浮动，p文字被夹中间。

div1 div3 左浮动 div2 右浮动

 

代码：

复制代码 
<!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>
    <title>float属性</title>
<style type="text/css">
body{
    margin:15px;
    font-family:Arial; font-size:12px;
    }

.father{
    background-color:#ffff99;
    border:1px solid #111111;
    padding:5px;                
    }

.father div{
    padding:10px;                
    margin:15px;                    
    border:1px dashed #111111;
    background-color:#90baff;
    }

.father p{
    border:1px dashed #111111;
    background-color:#ff90ba;
    clear:right;
    }

    
.son1{
/* 这里设置son1的浮动方式*/
float:left;
}

.son3{
/* 这里设置son3 的浮动方式*/
float:right;
}

.son2 {
/* 这里设置son2 的浮动方式*/
float:left;
}

</style>
</head>
<body>
    <div class="father">
        <div class="son1">Box-1</div>
        <div class="son2">Box-2</div>
        <div class="son3">Box-3<br/>Box-3<br/>Box-3<br/>Box-3<br/></div> <!-- 换行重新占据了三行内容 -->
        <p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p>
    </div>
</body>
</html>
复制代码

说明：有了br之后，浮动元素所在行又被重新占据了，p元素不会上来填充。

代码:

复制代码 
<!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>
    <title>float属性</title>
<style type="text/css">
body{
    margin:15px;
    font-family:Arial; font-size:12px;
    }

.father{
    background-color:#ffff99;
    border:1px solid #111111;
    padding:5px;                
    }

.father div{
    padding:10px;                
    margin:15px;                    
    border:1px dashed #111111;
    background-color:#90baff;
    }

.father p{
    border:1px dashed #111111;
    background-color:#ff90ba;
    clear:right;
    }

    
.son1{
float:left;
/* 这里设置son1的浮动方式*/

}

.son2{
/* 这里设置son1的浮动方式*/

float:left;
}

.son3{
/* 这里设置son1的浮动方式*/
float:right;
}

.father .clear{
margin:0;
padding:0;
border:0;
clear:both;    }


</style>
</head>
<body>
    <div class="father">
        <div class="son1">Box-1</div>
        <div class="son2">Box-2</div>
        <div class="son3">Box-3</div>
        <div class="clear"></div>
        <p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p>

    </div>
</body>
</html>
复制代码

说明：添加一个clear:both;属性之后，之前的空当地方就会被清理掉，p元素就只能另起一行了。


本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/p/4987724.html，如需转载请自行联系原作者

weixin_33812433
关注
float类型数据小例子c++
07-08
float类型数据小例子c++
float浮动以及案例演示
Globalizationa的博客
08-10 261
浮动元素会影响后边的元素，但不会影响前边的元素 清除浮动： 方法一：在浮动元素后面添加一个空元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width:100px; h...
页面图片浮动左右滑动效果的简单实现案例
09-04
本篇文章主要是对页面图片浮动左右滑动效果的简单实现案例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
CSS浮动详解及案例
小洋人最happy的专栏
07-14 3896
浮动的规则 规则一 元素一旦浮动后 脱离标准流 朝着向左或向右方向移动，直到自己的边界紧贴着包含块(一般是父元素)或其他元素的边界为止 定位元素会层叠在浮动元素上面 示例 <style> .box { height: 500px; background-color: green; } span { background-color: hotpink; } strong background-color: khaki;
float position的测试案例
GoodShot的专栏
03-18 2025
float position的测试案例
css float浮动属性使用方法和实例讲解
09-01
Css的float浮动属性，用于设置标签对象（如：标签盒子、标签、标签、标签等html标签）的浮动布局，浮动也就是我们所说标签对象浮动靠左（float:left）和浮动靠右(float:right)。 float的作用：通过css定义float...
css float left布局换行不正常问题的解决
09-22
float属性是一种非常有用的CSS布局方式，它允许元素向左或向右浮动，直到它的外边缘碰到包含框或另一个浮动元素的边框为止。使用float属性可以实现文字环绕图片的效果，或者是创建多列布局等。 然而，在浮动布局中...
浅谈CSS中的clear清除浮动
09-24
首先，CSS的浮动属性使用float属性，它可以使元素向左或向右浮动，直到其外边缘碰到包含框或另一个浮动元素的边缘为止。但是浮动元素脱离了文档流，不会影响到后续元素的布局，这常常会导致父元素无法正常包裹住浮动...
HTML + CSS 基本案例
08-22
此外，浮动（float）和定位（positioning）是常用的布局技术，用于实现复杂的设计。 在`学成在线首页.html`这个网页中，`<link>`标签可能被用来引入`main.css`，例如：`<link rel="stylesheet" type="text/css" ...
Css 基础案例 （2） —— 清除float浮动，解决float产生的副作用
weixin_39141044的博客
05-30 334
CSS中的定位机制 标准流 定位 浮动 float浮动的原因 float浮动的原因就是使浮动的元素脱离标准流，浮动的元素不占有原空间。 float浮动的副作用 理想效果： float浮动的子元素会脱离标准流，父元素中就会没有东西撑开，会引起父元素塌陷或者其他元素异位。 &lt;head&gt; &lt;title&gt;清除浮动的测试&lt;/title&gt; ...
CSS基础（5.float应用实例）
一清的博客
12-12 290
html> lang="en"> charset="UTF-8"> Title .header{ height: 40px; line-height: 40px; background-color: gold; } style="margin: auto"
float案例
lbs311709000127的博客
01-17 451
效果图： 代码： <!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; ...
css浮动案例
前端小99的博客
04-13 2160
彼此相邻的浮动元素清除浮动 - 使用 clear元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。使用 clear 属性往文本中添加图片廊：使用 float 创建一个网页页眉、页脚、左边的内容和主要内容。事例案列：&lt;style&gt;* {    box-sizing: border-box;}body {    ma...
html float 原理 及案例解析
xiongzhengxiang的专栏
11-04 6495
浮动在历史上最初是做什么的？  在最开始的web发展初期，只有一些很简单的文字和图片的布局，其中文字环绕图片怎么办呢？聪明的css开发者就发明了一个float属性。这就是现在我们要 说的浮动。因此，浮动出现的意义就是让文字环绕图片。这是最原始的初衷。 文字环绕图片是怎么做到的呢？下面分析下。首先我们看看没有float的图文混排。   代码： HTML> http-equi
左浮动和右浮动
热门推荐
自信的尘埃 www.gocpplua.com
01-18 1万+
左浮动和右浮动
css浮动(float)全方位案例解析
03-30 219
前言 浮动最早的使用是出自<img src="#" align="right" />，用于文本环绕图片的排版处理。当然也是一种常用的布局方式。 float 浮动 浮动元素脱离普通流，然后按照指定方向，向左或者向右移动，碰到父级边界或者另外一个浮动元素停止 值: left | right | none | inherit(继承) 初始值: none 应用于: 所有元素 继承...
前端学习（262）：order
歌谣的博客
12-30 347
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
XHTML学习
最新发布
大河之犬的博客
09-20 331
XHTML是一个严格遵循 XML语法规则的 HTML 标准。它是 HTML4 的一种重构版本，结合了 HTML 的灵活性和 XML 的严格性，如今XHTML已经得到了所有主流浏览器的支持文档结构XHTML DOCTYPE 是强制性的中的 XML namespace 属性是强制性的、、 以及 也是强制性的元素语法XHTML 元素必须正确嵌套XHTML 元素必须始终关闭XHTML 元素必须小写XHTML 文档必须有一个根元素。
CSS案例教程：浮动布局与新手入门
在本CSS案例教程中，我们将深入探讨如何利用浮动(float)进行页面布局，这是一个对新手极其友好的教程。在【第五课】中，我们将专注于浮动布局的应用，它在网页设计中扮演着至关重要的角色，特别是在创建多列布局时。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值