前端CSS基础10(浮动)
- 浮动
- 元素浮动后的特点
- 浮动后的特点
- 浮动后的影响及解决
- 浮动布局小练习
浮动
CSS中的浮动是一种布局技术,常用于实现元素的排列和定位。通过使用float属性,可以让元素在页面中左浮动或右浮动,使得其他内容围绕该元素布局。
在 CSS 中,可以使用 float
属性来使元素浮动。浮动的元素会脱离正常文档流,可以向左或向右移动,并尽可能靠近其相邻的浮动元素。
float 属性的常见取值包括:
left
:元素向左浮动。right
:元素向右浮动。none
:默认值
元素浮动后的特点
浮动前:如以下代码,2号浮动前
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer{
width: 400px;
height: 400px;
background-color:aqua;
padding: 10px;
}
.box{
font-size: 20px;
padding: 10px;
}
.box1{
background-color:yellow;
}
.box2{
background-color:antiquewhite;
/* float: left;*/
}
.box3{
background-color:blue;
}
span{
background-color: brown;
font-size: 40px;
vertical-align: middle;
}
img{
height: 200px;
float: left;
margin-right: 0.5em;
}
.text::first-letter{
font-size: 80px;
float: left;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
</body>
</html>
浮动2后:
浮动3后
浮动后的特点
CSS 元素浮动后具有以下特点:
- 脱离文档流:浮动元素会脱离正常文档流,不再占据原本的空间,而是向左或向右移动,允许其他内容环绕在其周围。(浮空)
- **元素重叠:**浮动元素会尽可能靠近相邻的浮动元素,导致元素重叠。这通常会影响页面布局,需要通过清除浮动或其他方法来处理重叠的情况。
- 不会独占一行,可以与其他元素共用一行。
- **高度塌陷:**父元素的高度可能因为子元素浮动而无法被正常撑开,造成高度塌陷的问题。可以使用清除浮动的技术解决这个问题。
- **文本环绕:**浮动元素可以使文本环绕在其周围,创造出独特的设计效果。
- 浮动清除:为了避免浮动元素导致的布局问题,通常会使用清除浮动技术,包括清除浮动的伪元素、clear 属性等方法。
- 不管浮动前是什么元素,浮动后,默认宽和高都是被内容撑开(尽可能小),而且可以设置宽和高。
- 可以正常的设置四个方向的margin和padding。
浮动后的影响及解决
影响:
- 对兄弟的影响:后面的兄弟元素,会占据浮动元素之前的位置,在浮动元素的下面;对前面的兄弟无影响。
- 对父元素的影响:不能撑起来父元素的高度,导致父元素高度塌陷;但是父元素的宽度依然束缚浮动的元素。
解决方案:
-
方案一:在所有浮动元素的最后面,添加一个块级元素,并给该块级元素设置
clear:both
; -
方案二:给浮动的父元素,设置伪元素,通过伪元素清除浮动,如下:(推荐使用)
.clearfix::after{
content: '';
display: block;
clear: both;
}
clear 属性用于指定元素哪些方向的浮动元素是不允许靠近的。它只会对前面有浮动元素的元素生效。
以下是 clear 属性的属性值及功能:
clear: left;: 表示元素的左侧不允许存在浮动元素。如果左侧有浮动元素,这个元素将被清除浮动,并显示在浮动元素下方。
clear: right;: 表示元素的右侧不允许存在浮动元素。如果右侧有浮动元素,这个元素将被清除浮动,并显示在浮动元素下方。
clear: both;: 表示元素两侧都不允许存在浮动元素。即使左右两侧都有浮动元素,这个元素也会被清除浮动,并显示在所有浮动元素下方。
clear: none;: 默认值,表示元素两侧都可以存在浮动元素,不会清除任何浮动
布局中的一个原则:设置浮动的时候,兄弟元素要么全都浮动,要么全都不浮动。
浮动布局小练习
- 块元素共用一行就是浮动,不浮动的块元素就是独占一行。
- 块元素本来就是独占一行,想让几个块元素并行则用到浮动。
- 每用到浮动,就在父元素使用浮动消除,浮动消除代码如下:使用以下代码,只需要在使用浮动元素的父类元素加上一个class="clearfix"的类就行。
.clearfix::after{
content: '';
display: block;
clear: both;
}
写布局的代码,写代码前先分好块
块里面套块
块块并排(多块占用一行)用浮动,一个块单独占一行不用浮动。记得父元素的浮动消除
实现代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.leftfix{
float: left;
}
.rightfix{
float: right;
}
.clearfix::after{
content: '';
display: block;
clear: both;
}
.container{
width:960px;
margin:0 auto;
text-align: center;
}
.loge{
width:200px;
}
.banner1{
width:540px;
margin:0px 10px;
}
.banner2{
width:200px;
}
.loge,.banner1,.banner2{
height: 80px;
background-color: #ccc;
line-height: 80px;
}
.menu{
height: 30px;
background-color: #ccc;
margin-top: 10px;
line-height: 30px;
}
.item1,.item2{
width: 368px;
height: 198px;
border: 1px solid #ccc;
line-height:198px;
margin-right: 10px;
}
.content{
margin-top:10px;
}
.item3,.item4,.item5,.item6{
width: 178px;
height: 198px;
border: 1px solid #ccc;
margin-right: 10px;
line-height: 198px;
}
.bottom{
margin-top: 10px;
}
.item7,.item8,.item9{
width: 188px;
height: 128px;
border: 1px solid #ccc;
}
.item7,.item8{
margin-bottom: 10px;
}
.foot{
width: 960px;
height: 60px;
background-color: #ccc;
margin-top: 10px;
line-height: 58px;
}
</style>
</head>
<body>
<!-- 整体 -->
<div class="container ">
<!-- 头部 -->
<div class="page-header clearfix">
<div class="loge leftfix">loge</div>
<div class="banner1 leftfix">banner1</div>
<div class="banner2 leftfix">banner2</div>
</div>
<!-- 菜单 -->
<div class="menu">菜单</div>
<!-- 内容区 -->
<div class="content clearfix">
<!-- 内容区左 -->
<div class="left leftfix ">
<!-- 内容区上半部分 -->
<div class="top clearfix">
<div class="item1 leftfix">栏目一</div>
<div class="item2 leftfix">栏目二</div>
</div>
<!-- 内容区下半部分 -->
<div class="bottom clearfix">
<div class="item3 leftfix">栏目三</div>
<div class="item4 leftfix">栏目四</div>
<div class="item5 leftfix">栏目五</div>
<div class="item6 leftfix">栏目六</div>
</div>
</div>
<!-- 内容区右 -->
<div class="right rightfix">
<div class="item7">栏目七</div>
<div class="item8">栏目八</div>
<div class="item9">栏目九</div>
</div>
</div>
<!-- 页脚 -->
<div class="foot">页脚</div>
</div>
</body>
</html>
之前不太了解的点
*{
margin: 0px;
padding: 0px;
}
在CSS中,*{ margin: 0px; padding: 0px; }
的作用是移除所有HTML元素的外边距(margin)和内边距(padding)。
外边距(margin)是指元素周围的空白区域,用于控制元素与其他元素之间的间距。而内边距(padding)是指元素内容与边框之间的空白区域,用于控制元素内部内容的间距。
通过将margin
和padding
都设置为0,可以消除所有元素的外边距和内边距,使页面布局更加紧凑。这在某些情况下可能是有用的,例如当你想要创建一个自定义的布局或者去除默认的浏览器样式时。