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浮动在CSS中的作用
高级网络营销师的博客
04-20 1457
float到底是什么？ float就是“浮动”的意思，在CSS中让元素能够让元素脱离文档流而使其能够浮动在父元素的，最左边或是最右边。 文档流：在html中文档流即为元素从上而下排列的顺序。 脱离文档流：元素从正常的排列顺序被抽离。 最左边/最右边：对于上述的移动到父元素最左或是最右边指的是元素可以向左边或是向右边移动到另外一个元素或是到父元素内容区的边界，这里不包含 padding 。 floa...
CSS浮动十：float设计初衷：图文混排
小枯林的博客
12-24 2606
float设计初衷：实现图文混排。 后来，随着技术的不断应用，将div用到更多的场合，比如商品列表并排显示便是float的典型应用。 目录 一：图文混排的实现 1.图文混排示例程序：通过“段落和div进行混排”实现 2.图文混排示例程序：通过“段落和图片进行混排”实现 2.1具体实现代码和效果 2.2文字的上面和下面均留有间隔的问题 如下： 一：图文混排的实现 1.图文混排示例程序：通过“段落和div进行混排”实现 <!DOCTYPE html> <html&gt.
float类型数据小例子c++
07-08
float类型数据小例子c++
float position的测试案例
GoodShot的专栏
03-18 2027
float position的测试案例
float浮动以及案例演示
Globalizationa的博客
08-10 262
浮动元素会影响后边的元素，但不会影响前边的元素 清除浮动： 方法一：在浮动元素后面添加一个空元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width:100px; h...
float案例
lbs311709000127的博客
01-17 452
效果图： 代码： <!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; ...
css浮动(float)全方位案例解析
03-30 220
前言 浮动最早的使用是出自<img src="#" align="right" />，用于文本环绕图片的排版处理。当然也是一种常用的布局方式。 float 浮动 浮动元素脱离普通流，然后按照指定方向，向左或者向右移动，碰到父级边界或者另外一个浮动元素停止 值: left | right | none | inherit(继承) 初始值: none 应用于: 所有元素 继承...
css float浮动属性使用方法和实例讲解
09-01
Css的float浮动属性，用于设置标签对象（如：标签盒子、标签、标签、标签等html标签）的浮动布局，浮动也就是我们所说标签对象浮动靠左（float:left）和浮动靠右(float:right)。 float的作用：通过css定义float...
css float left布局换行不正常问题的解决
09-22
float属性是一种非常有用的CSS布局方式，它允许元素向左或向右浮动，直到它的外边缘碰到包含框或另一个浮动元素的边框为止。使用float属性可以实现文字环绕图片的效果，或者是创建多列布局等。 然而，在浮动布局中...
CSS元素的浮动与定位综合案例3.pdf
07-10
在CSS中，元素的浮动和定位是两种关键的技术，用于创建复杂的网页布局。在这个名为“蓝色多瑙河”的浪漫式网页布局案例中，它们被巧妙地结合使用以实现3行2列的布局。这个案例源自喻浩的《DIV+CSS网页样式与布局从...
页面图片浮动左右滑动效果的简单实现案例
09-04
本篇文章主要是对页面图片浮动左右滑动效果的简单实现案例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
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"
Css 基础案例 （2） —— 清除float浮动，解决float产生的副作用
weixin_39141044的博客
05-30 335
CSS中的定位机制 标准流 定位 浮动 float浮动的原因 float浮动的原因就是使浮动的元素脱离标准流，浮动的元素不占有原空间。 float浮动的副作用 理想效果： float浮动的子元素会脱离标准流，父元素中就会没有东西撑开，会引起父元素塌陷或者其他元素异位。 &lt;head&gt; &lt;title&gt;清除浮动的测试&lt;/title&gt; ...
CSS浮动详解及案例
小洋人最happy的专栏
07-14 3897
浮动的规则 规则一 元素一旦浮动后 脱离标准流 朝着向左或向右方向移动，直到自己的边界紧贴着包含块(一般是父元素)或其他元素的边界为止 定位元素会层叠在浮动元素上面 示例 <style> .box { height: 500px; background-color: green; } span { background-color: hotpink; } strong background-color: khaki;
前端学习（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="...
左浮动和右浮动
热门推荐
自信的尘埃 www.gocpplua.com
01-18 1万+
左浮动和右浮动
html float 原理 及案例解析
xiongzhengxiang的专栏
11-04 6502
浮动在历史上最初是做什么的？  在最开始的web发展初期，只有一些很简单的文字和图片的布局，其中文字环绕图片怎么办呢？聪明的css开发者就发明了一个float属性。这就是现在我们要 说的浮动。因此，浮动出现的意义就是让文字环绕图片。这是最原始的初衷。 文字环绕图片是怎么做到的呢？下面分析下。首先我们看看没有float的图文混排。   代码： HTML> http-equi
XHTML学习
大河之犬的博客
09-20 393
XHTML是一个严格遵循 XML语法规则的 HTML 标准。它是 HTML4 的一种重构版本，结合了 HTML 的灵活性和 XML 的严格性，如今XHTML已经得到了所有主流浏览器的支持文档结构XHTML DOCTYPE 是强制性的中的 XML namespace 属性是强制性的、、 以及 也是强制性的元素语法XHTML 元素必须正确嵌套XHTML 元素必须始终关闭XHTML 元素必须小写XHTML 文档必须有一个根元素。
相机标定源代码（张正友标定法）
最新发布
09-27
相机标定源代码，给自己的手机摄像头进行标定，采用张正友标定法，包含数据和源代码。
CSS案例教程：浮动布局与新手入门
在本CSS案例教程中，我们将深入探讨如何利用浮动(float)进行页面布局，这是一个对新手极其友好的教程。在【第五课】中，我们将专注于浮动布局的应用，它在网页设计中扮演着至关重要的角色，特别是在创建多列布局时。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值