float(浮动)(层级)
元素被设置为浮动元素后，元素会具有行内块元素的特性。
当我们对一个元素使用了浮动后，它会脱离文档流，但不完全脱离(提升半层层级)，浮动元素提升层级后，其后面的元素的盒模型(如：背景样式)会占据浮动元素的位置，而前半层(如：文字，图片)会被抵制在浮动元素的边界处。
image.png
<style>
*{
padding: 0;
margin: 0;
}
.img{
border: 1px solid;
float: left;
opacity: 0.4;
}
div{
width: 250px;
height: 250px;
background-color: aqua;
}
.img2{
border: 1px solid;
}
</style>
</head>
<body>
<img src="../eightteen/image/小鸟.jpg" alt="apple" class="img">
<div><img src="../eightteen/image/小鸟.jpg" alt="apple" class="img2"></div>
</body>
浮动布局(浮动的初衷是实现图文混排)
图文混排--实现文字环绕图片的效果。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图文混排 demo</title>
<style>
img{
float: left;
}
</style>
</head>
<body>
<p>
<img src="images/monkey.gif" alt="猴子">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus beatae saepe, praesentium dolores doloribus aperiam rerum esse harum aut veniam? Veniam, architecto ipsum dicta fugit doloremque earum ullam sunt tempore eius tempora explicabo sit, quidem similique magnam quibusdam eligendi quisquam debitis sapiente aperiam eaque quis, laudantium placeat consequuntur perspiciatis? Natus optio libero ipsum sit repellat minus molestiae suscipit nemo repudiandae itaque, nulla hic rem, labore, quas dolore temporibus quae. Aperiam incidunt deserunt optio quis sed itaque fugiat nulla esse possimus repellendus. Consectetur, libero unde adipisci est obcaecati provident impedit optio cumque quisquam totam nostrum laborum quae labore accusamus modi expedita necessitatibus aliquam quaerat voluptas sapiente omnis. Nulla nam amet non, necessitatibus ab vero consequatur natus hic ut eos! Cum natus consequuntur reiciendis provident quasi! Iusto nemo illum odit unde corporis, fugit iste, qui blanditiis aspernatur voluptas alias fugiat? Nesciunt fugiat eaque sapiente, adipisci itaque, illo magnam dolore saepe sequi odio iste ut id impedit facilis ullam! Cupiditate facilis aut, vel iste ipsa quia quaerat repellendus consectetur necessitatibus ullam iusto soluta vero. Adipisci dolore autem beatae, reprehenderit aspernatur ea quis odio dignissimos voluptates, numquam fugit deleniti ratione dolorem aut laboriosam! Culpa expedita esse veniam sint asperiores officiis quod repellendus obcaecati, inventore molestias, architecto odio. Corporis porro incidunt quam quis sit quaerat quia? Soluta nesciunt modi voluptate doloremque veniam adipisci, tenetur quaerat ut ducimus laudantium eius magni consequatur fugit accusamus porro non quia aliquid repudiandae. Repellat deleniti ad, architecto voluptatum modi eos nostrum voluptas odio laborum enim tempore officiis laboriosam dolores culpa eveniet! Fuga incidunt ea harum rerum, amet reiciendis, vitae consequatur possimus voluptatum quis suscipit cupiditate laudantium ipsam, voluptate cumque dolorum saepe fugit adipisci dolor laboriosam sapiente! Voluptas aperiam illo deserunt? Vero ad perferendis explicabo placeat a doloribus iusto voluptatum consequuntur!
</p>
</body>
</html>
浮动布局中盒模式的计算
利用浮动元素的父元素的宽高来进行计算
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动布局盒模式的计算 demo</title>
<style>
.d-parent {
border: 10px solid green;
width: 540px;
height: 180px;
}
.d-float {
float: left;
border: 10px dotted orange;
margin: 10px;
padding: 10px;
/* .d-float盒子的总宽度 = 540px ÷ 3 = 180px,180 = 10 + 10 + 10 + 10 + 10 + 10 + width,width = 120px */
width: 120px;
/* .d-float盒子的总高度 = 180px,180 = 10 + 10 + 10 + 10 + 10 + 10 + height,height = 120px */
height: 120px;
}
</style>
</head>
<body>
<h1>浮动布局中的盒模式计算</h1>
<div class="d-parent">
<div class="d-float">d-float</div>
<div class="d-float">d-float</div>
<div class="d-float">d-float</div>
</div>
</body>
</html>
清除浮动
原因：在没有给父元素设置高度的前提下，当父元素下的子元素浮动后，子元素就脱离了正常的文档流，不再接受文档流的管辖，这时父元素的高度就为0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>reason demo</title>
<style>
.d-parent {
border: 10px solid green;
}
.d-float {
float: left;
border: 10px solid orange;
}
</style>
</head>
<body>
<h1>浮动布局中的盒模式计算</h1>
<div class="d-parent">
<div class="d-float">d-float</div>
<div class="d-float">d-float</div>
<div class="d-float">d-float</div>
</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptatum ad aspernatur veniam aut fuga
laboriosam perspiciatis sequi, eius soluta repellendus ratione repudiandae officia fugiat corrupti ipsam error
deleniti. Laborum?</div>
</body>
</html>
清除浮动布局的方法
<1>给父元素加高度(height)
<2>在父元素中加一个
子元素
<div class="d-parent">
<div class="d-float">d-float</div>
<br clear = "all">
</div>
<3>给父元素加一个<div>标签设置其样式
<div class="d-parent">
<div class="d-float">d-float</div>
<div style = "clear:both;height:0px;overflow:hidden;"></div>
</div>
此方法在IE6下有兼容性问题，IE6下最小高度为19px,所以在IE6下必须设置overflow为hidden(触发haslayout--IE的渲染模式)
<4>开启BFC
建议开启BFC的最佳方案是overflow为hidden /auto
<5>使用after伪元素清除浮动
用法：将下列样式复制到css样式中，在需要浮动的元素的父元素中添加clearfix到class中即可。
.clearfix:after {
content: "";
display: block;
clear: both;
}
.clearfix {
*zoom: 1; /* 兼容IE6、7(触发haslayout ,*是CSS hack--只有IE6、7能识别，其他浏览器不进行解析)*/
}
<div class="d-parent clearfix">
<div class="d-float">d-float</div>
<div class="d-float">d-float</div>
<div class="d-float">d-float</div>
</div>
<6>使用before和after双伪元素清除浮动
用法：将下列样式复制到css样式中，在需要浮动的元素的父元素中添加clearfix到class中即可。
.clearfix:before,
.clearfix:after {
content: "";
display: table; /* 触发BFC */
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1; /*兼容IE6-7*/
}
<div class="d-parent clearfix">
<div class="d-float">d-float</div>
<div class="d-float">d-float</div>
<div class="d-float">d-float</div>
</div>
网友评论