(CSS learning record): float (float)

• Written in front: refer to the tutorial of Bilibili dark horse programmer pink teacher 
• Address: https://www.bilibili.com/video/BV14J4114768?t=328&p=26

table of Contents

Float

Three mechanisms of CSS layout

Why do we need to float?

What is float (float)

Float summary

Application of Float (Important)

Floating application case

Navigation bar case

Float (float) expansion

The relationship between the floating element and the parent box

The relationship between floating elements and sibling boxes

Clear float

Why clear float

Clear floating essence

How to clear float

Extra labeling method (partition wall method)

Parent method to add overflow attribute

Use the after pseudo element to clear the float

Use double pseudo elements to clear floats

Clear floating summary

Photoshop cuts

PS slice tool

Cut picture plugin

Float

Three mechanisms of CSS layout

• The core of web page layout is to use CSS to place the boxes .
• CSS provides 3 mechanisms to set the position of the box, which are ordinary flow (standard flow), floating and positioning , among them:
• Normal stream (standard stream)
  • Block-level elements will occupy a row,arranged in order from top to bottom ;
    • Commonly used elements: div , hr, p, h1~h6, ul , ol, dl, form, table
  • The elements in the row will bearrangedin order, from left to right , and will automatically wrap when they meet the edge of the parent element;
    • Common elements: span, a , i, em, etc.
• float
  • Let the box from the normal stream float up, the main role so that a plurality of block-level display line boxes .
• Positioning
  • The box set a browser in a position --CSS inseparable positioning, especially behind js effects.

Why do we need to float?

• Thought questions:
  • We must first think about the most common problems in the following 2 layouts?
  • How to arrange multiple boxes (div) horizontally in a row?

• How to realize the left and right alignment of the box?

• Although I learned about inline-block before, it has its own shortcomings:
  • It can display multiple elements in one line, but there will be blank gaps in the middle, which cannot satisfy the first problem above.
  • It cannot achieve the second problem above, the box is aligned left and right
• Because of some web page layout requirements, the standard stream can no longer meet our needs, so we need to float to complete the web page layout. 

What is float (float)

• Concept : The floating of the element means that the element with the floating attribute will be
  • Departure from standard ordinary flow control
  • Move to the specified location.
• effect
  • Arrange multiple boxes (div) horizontally in a row , making floating an important means of layout.
  • Can realize the left and right alignment of the box, etc...
  • Floating was first used to control the picture and achieve the effect of text surrounding the picture .
• grammar
  • In the CSS by floatChinese, Japanese drain float floating property definition syntax is as follows:

选择器 { float: 属性值; }

Attribute value	description
none	Element does not float ( default value )
left	Element to the left float
right	Element to the right float

• Floating formula

• Floating——Floating~Floating~Floating~~~ Floating on top of the ordinary stream. Depart from the standard stream. Commonly known as "off the standard "

 

.box1 {
    width: 200px;
    height: 200px;
    background-color: rgba(255, 0, 0, 0.5);
    float: left;
}
.box2 {
    width: 150px;
    height: 300px;
    background-color: skyblue;
}

• Summary :
  • The float property makes the box float on top of the standard stream, so the second standard stream box runs under the floating box .

• Omission of floating formulas

• Floating-Leaking ~ Leaking ~ Leaking ~ Floating box, leaking its original position to the box below the standard stream, it does not occupy the original position, is out of the standard stream , we commonly call it "off the standard."

• Floating formula

• Floating-the characteristic float attribute will change the element display attribute .
• Any element can float . The floating element generates a block-level box, regardless of what kind of element it is. The generated block-level box is very similar to our previous inline block.
• Experience case-div arranged horizontally

div {
    width: 200px;
    height: 200px;
    background-color: pink;
    /* 转换为行内块元素，可以水平显示，不过 div 之间有间隙，不方便处理 */
    /* display: inline-block; */
    /* 设置浮动属性，可以让 div 水平排列，并且没有间隙 */
    float: left;
}
.two {
    background-color: hotpink;
}

• Note: The floating elements are attached to each other, but if the parent width cannot fit these floating boxes, the extra boxes will be aligned on a new line

Float summary

• The core purpose of using floats is to display multiple block-level boxes on the same line . Because this is our most common layout
• float - float

Features	Description
float	The floating box is floating, floating on top of other standard flow boxes.
leak	The floating box does not occupy a position, and its original position is leaked to the standard stream box .
special	Special note : Floating elements will change the display properties, similar to converting to inline blocks, but there is no gap between the elements

Application of Float (Important)

• Floating and standard stream parent box matching
  • We know that floating is off-standard and will affect the following standard stream elements. At this time, we need to add a standard stream father to the floating element, so as to minimize the impact on other standard streams.
• A complete web page is completed by standard flow + floating + positioning.

Floating application case

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>小米案例练习</title>
	<style>
		/*清除元素默认内外边距样式*/
		* {
			margin: 0;
			padding: 0;
		}
		/*清除列表样式 前面的小点点*/
		li {
			list-style: none;
		}
		.box {
			width: 1226px;
			height: 615px;
			background-color: pink;
			margin: auto;
		}
		.left {
			float: left;
			width: 234px;
			height: 615px;
			background-color: purple;
		}
		.left img {
			/*width: 234px;*/
			width: 100%;
		}
		.right {
			float: right;
			width: 992px;
			height: 615px;
			background-color: skyblue;
		}
		.right li {
			float: left;
			width: 234px;
			height: 300px;
			background-color: pink;
			margin-left: 14px;
			margin-bottom: 14px;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="left">
			<img src="images/mi.jpg" alt="">
		</div>
		<ul class="right">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
		</ul>
	</div>
</body>
</html>

 

Navigation bar case

 

• Note that in the actual important navigation bar, we will not use link a directly, but use li to include the link (li+a) .
  • The semantics of li+a are clearer. At first glance, this is an organized list of content.
  • If you use a directly, the search engine can easily be identified as being suspected of piling up keywords (piling up keywords deliberately is likely to be at the risk of lowering the power of the search engine), which will affect the ranking of the website

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>导航栏案例</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		li {
			list-style: none;
		}
		.banner {
			width: 760px;
			height: 150px;
			background-color: pink;
			margin: auto;
		}
		.nav {
			width: 760px;
			height: 32px;
			/*background-color: pink;*/
			margin: 0 auto;
			background: url(images/nav_bg.jpg) repeat-x;
		}
		.nav ul li {
			/*因为li 让文字竖着显示，所以必须给li 添加浮动*/
			float: left;
		}
		.nav ul li a {
			/*a是行内元素需要转换*/
			/*一定给a 大小，  因为我们需要 a:hover*/
			display: block;
			width: 80px;
			line-height: 32px;
			height: 32px;
			/*background-color: pink;*/
			background: url(images/button1.jpg) no-repeat;
			font-size: 12px;
			text-decoration: none;
			color: #40510a;
			text-align: center;

		}
		.nav ul li a:hover {
			background-image: url(images/button2.jpg);
		}
	</style>
</head>
<body>
	<!-- banner 是广告条的 -->
	<div class="banner">
		<img src="images/banner.jpg" alt="">
	</div>
	<!-- nav 导航栏部分  -->
	<!-- 以后我们重要的导航栏，都要采取 li 包含a 的写法 -->
	<div class="nav">
		<ul>
			<li><a href="#">网站首页</a></li>
			<li><a href="#">网站首页</a></li>
			<li><a href="#">网站首页</a></li>
			<li><a href="#">网站首页</a></li>
			<li><a href="#">网站首页</a></li>
			<li><a href="#">网站首页</a></li>
		</ul>
	</div>
</body>
</html>

Float (float) expansion

The relationship between the floating element and the parent box

• The float of the child box is aligned with the parent box
• Will not overlap with the border of the parent box, nor will it exceed the inner margin of the parent box

 

The relationship between floating elements and sibling boxes

• In a parent box, if the previous sibling box is:
  • Floating , then the current box will be aligned with the top of the previous box;
  • Normal flow , then the current box will be displayed below the previous sibling box.
• Floating will only affect the current or subsequent standard stream box, and will not affect the previous standard stream.

• Suggest
  • If there are multiple child boxes in a box, if one of the boxes floats, the other brothers should also float. Prevent problems

Clear float

Why clear float

• Because in many cases it is inconvenient to give the height of the parent box , but the child box does not occupy the position when floating. Finally, the height of the parent box is 0 , which affects the standard stream box below.

• to sum up:
  • Since the floating element no longer occupies the position of the original document flow, it will affect the typesetting of the following elements
  • To be precise, it is not clearing the float, but the effect of clearing the float

Clear floating essence

• Clearing the float is mainly to solve the problem that the parent element has an internal height of 0 due to the child float. After clearing the float, the parent will automatically detect the height based on the floating child box. If the parent has a height, it will not affect the standard stream below

How to clear float

• In CSS, the clear attribute is used to clear floats, the syntax:

选择器{clear:属性值;}   clear 清除  

Attribute value	description
left	Do not allow floating elements on the left (clear the effect of floating on the left)
right	Do not allow floating elements on the right (clear the effect of floating on the right)
both	At the same time remove the impact of floating on the left and right sides

• But in our actual work, we almost only use clear: both ;

Extra labeling method (partition wall method)

• The W3C recommended method is to add an empty tag at the end of the floating element, such as <div style=”clear:both”></div>, or other tags such as br.
• Advantages: easy to understand, easy to write
• Disadvantages: Many meaningless tags are added, and the structure is poor.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*很多情况下，我们的父盒子，不方便给高度  根据内容撑开，有多少内容，我的父盒子就有多高*/
		.one {
			width: 500px;
			/*background-color: pink;*/
			border: 1px  solid red;
		}
		/*因为damao 二毛 浮动了，不占有位置， 而父级又没有高度， 所以two 就到底下去了*/
		.damao {
			float: left;
			width: 200px;
			height: 200px;
			background-color: purple;
		}
		.ermao {
			float: left;
			width: 250px;
			height: 250px;
			background-color: skyblue;
		}
		.two {
			width: 700px;
			height: 150px;
			background-color: #000;
		}
		/*清除浮动*/
		.clear {
			clear: both;
		}
	</style>
</head>
<body>
	<div class="one">
		<div class="damao"></div>
		<div class="ermao"></div>
		<div class="clear"></div>
	</div>
	<div class="two"></div>
</body>
</html>

Parent method to add overflow attribute

• You can add to the parent: overflow is hidden| auto| scroll can be realized.
• Advantages: simple code
• Disadvantages: When the content increases, it is easy to cause the content to be hidden without automatic line wrapping, and it is impossible to display the elements that need to overflow.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*很多情况下，我们的父盒子，不方便给高度  根据内容撑开，有多少内容，我的父盒子就有多高*/
		.one {
			width: 500px;
			/*background-color: pink;*/
			border: 1px  solid red;
			/*给父级添加 overflow 就可以清除浮动*/
			overflow: hidden;
		}
		/*因为damao 二毛 浮动了，不占有位置， 而父级又没有高度， 所以two 就到底下去了*/
		.damao {
			float: left;
			width: 200px;
			height: 200px;
			background-color: purple;
		}
		.ermao {
			float: left;
			width: 250px;
			height: 250px;
			background-color: skyblue;
		}
		.two {
			width: 700px;
			height: 150px;
			background-color: #000;
		}

	</style>
</head>
<body>
	<div class="one">
		<div class="damao"></div>
		<div class="ermao"></div>
	</div>
	<div class="two"></div>
</body>
</html>

Use the after pseudo element to clear the float

• The :after method is an upgraded version of the extra tag method for empty elements. The advantage is that there is no need to tag separately

 .clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   

 .clearfix {*zoom: 1;}   /* IE6、7 专有 */

• Advantages: In line with the semantics of the closed floating thought structure is correct
• Disadvantages: Since IE6-7 does not support :after, use zoom:1 to trigger hasLayout.
• Representative websites: Baidu, Taobao, Netease, etc.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*声明清除浮动的样式*/
		.clearfix:after {
			content: "";
			display: block;
			height: 0;
			visibility: hidden;
			clear: both;
		}
		.clearfix {
			*zoom: 1;  /*ie6,7 专门清除浮动的样式*/
		}
		/*很多情况下，我们的父盒子，不方便给高度  根据内容撑开，有多少内容，我的父盒子就有多高*/
		.one {
			width: 500px;
			/*background-color: pink;*/
			border: 1px  solid red;
			
		}
		/*因为damao 二毛 浮动了，不占有位置， 而父级又没有高度， 所以two 就到底下去了*/
		.damao {
			float: left;
			width: 200px;
			height: 200px;
			background-color: purple;
		}
		.ermao {
			float: left;
			width: 250px;
			height: 250px;
			background-color: skyblue;
		}
		.two {
			width: 700px;
			height: 150px;
			background-color: #000;
		}

	</style>
</head>
<body>
	<div class="one clearfix">
		<div class="damao"></div>
		<div class="ermao"></div>
	</div>
	<div class="two"></div>
</body>
</html>

Use double pseudo elements to clear floats

.clearfix:before,.clearfix:after { 
  content:"";
  display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

• Advantages: The code is more concise
• Disadvantages: Since IE6-7 does not support :after, use zoom:1 to trigger hasLayout.
• Representative websites: Xiaomi, Tencent, etc.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*声明清除浮动的样式*/
		.clearfix:before,
		.clearfix:after {
			content: "";
			display: table;
		}
		.clearfix:after {
			clear: both;
		}
		.clearfix {
			*zoom: 1;
		}
		/*很多情况下，我们的父盒子，不方便给高度  根据内容撑开，有多少内容，我的父盒子就有多高*/
		.one {
			width: 500px;
			/*background-color: pink;*/
			border: 1px  solid red;
			
		}
		/*因为damao 二毛 浮动了，不占有位置， 而父级又没有高度， 所以two 就到底下去了*/
		.damao {
			float: left;
			width: 200px;
			height: 200px;
			background-color: purple;
		}
		.ermao {
			float: left;
			width: 250px;
			height: 250px;
			background-color: skyblue;
		}
		.two {
			width: 700px;
			height: 150px;
			background-color: #000;
		}

	</style>
</head>
<body>
	<div class="one clearfix">
		<div class="damao"></div>
		<div class="ermao"></div>
	</div>
	<div class="two"></div>
</body>
</html>

Clear floating summary

• When should I clear the float?
  • Parent has no height
  • Child box floating
  • If it affects the following layout, we should clear the float.

Ways to clear floats	advantage	Disadvantage
Extra label method (partition wall method)	Easy to understand and easy to write	Add many meaningless tags, and the structure is poor.
父级overflow:hidden;	Simple to write	Overflow hiding
Parent after pseudo element	The structure is semantically correct	Since IE6-7 does not support :after, compatibility issues
Parent double pseudo element	The structure is semantically correct	Since IE6-7 does not support :after, compatibility issues

Photoshop cuts

• Common picture format

jpg image format	JPEG (.JPG) retains better color information, high definition, and more colors. The pictures of our products are often in jpg format
gif image format	GIF format can only store up to 256 colors, so it is usually used to display simple graphics and fonts, but it can save transparent backgrounds and animation effects
png image format	It is an emerging network graphics format that combines the advantages of GIF and JPEG, has the characteristics of rich storage formats, and can maintain a transparent background
PSD image format	The PSD format is a special format for Photoshop, which can store various design drafts such as layers, channels, and masks.

PS slice tool

• ps cut pictures, in two major steps:
• 1). Use slice to select picture
  • Manually draw out with the slicing tool
  • Layer menu---new layer-based slice
  • Use auxiliary lines to slice images - slices based on reference lines

• 2). Export slice
  • File menu-save as the format used by web devices-select the image format we want-click save-don't forget the selected slice

Cut picture plugin

• Cutterman is a plug-in that runs in photoshop, which can automatically output the layers you need to replace the traditional manual "export web format" and the cumbersome process of using slice tools to cut pictures one by one. It supports a variety of image sizes, formats, and forms of output, which is convenient for you to use on PC, ios, Android, etc. It does not require you to memorize a bunch of grammar and rules, pure click operation, convenient, fast and easy to use.
• Official website: http://www.cutterman.cn/zh/cutterman
• Note: The cutterman plug-in requires that your ps must be a full version, not a green version, so you need to install the full version from a new one.

to sum up