What is a Collection Float?

Clear float refers to clearing the float attribute of an element.

Clear float

Right!

Clear float refers to clearing the float attribute of an element.

Suppose there are three box objects, one parent contains two children, one child uses the float: left property, and the other child uses the float: right property. Also set dl css border, the color of the parent css border is red, and the color of the two child borders is blue; the background style of the parent CSS is yellow, and the background of the two children is white; The width is 180px, and the two children set the same height to 100px. The parent css height is not set for the time being (usually the parent does not set the height when the actual css layout, and the height is the adaptive height with the content). ^[1]

Add float to parent

<! DOCTYPE HTML> ^[2]

<html>

<head>

<title> Untitled document </ title>

<style>

.box {width: 300px; margin: 0 auto; border: 10px solid # 000; float: left;}

.dl {width: 200px; height: 200px; background: red; float: left;}

/ *

Clear float

1. Add float to parent (out of center)

* /

</ style>

</ head>

<body>

</ dl>

</ body>

</ html>

Add display: inline-block to the parent;

<! DOCTYPE HTML>

<html>

<head>

<title> Untitled document </ title>

<style>

.box {width: 300px; margin: 0 auto; border: 10px solid # 000; display: inline-block;}

.dl {width: 200px; height: 200px; background: red; float: left;}

/ *

Clear float

1. Add float to the parent

2.Add display: inline-block to the parent

* /

</ style>

</ head>

<body>

</ dl>

</ body>

</ html>

Add <dl class = "clear"> </ dl>

.clear {height: 0px; font-size: 0; clear: both;} But under ie6, block elements have a minimum height, that is, when height <19px, the default is 19px, the solution is font-size: 0; overflow: hidden;

<! DOCTYPE HTML>

<html>

<head>

<title> Untitled document </ title>

<style>

.box {width: 300px; margin: 0 auto; border: 10px solid # 000;}

.dl {width: 200px; height: 200px; background: red; float: left;}

.clear {height: 0px; font-size: 0; clear: both;}

/ *

Clear float

1. Add float to the parent

2.Add display: inline-block to the parent

3. Add <dl class = "clear"> </ dl> under the floating element

.clear {height: 0px; font-size: 0; clear: both;}

* /

</ style>

</ head>

<body>

</ dl>

</ body>

</ html>

Add <br clear="all"> under floating elements

<! DOCTYPE HTML>

<html>

<head>

<title> Untitled document </ title>

<style>

.box {width: 300px; margin: 0 auto; border: 10px solid # 000;}

.dl {width: 200px; height: 200px; background: red; float: left;}

/ *

Clear float

1. Add float to the parent

2.Add display: inline-block to the parent

3. Add <dl class = "clear"> </ dl> under the floating element

.clear {height: 0px; font-size: 0; clear: both;}

4. Add <br clear="all"/> under the floating element

* /

</ style>

</ head>

<body>

</ dl>

</ body>

</ html>

Add {zoom: 1;} to the parent of the floating element

<! DOCTYPE HTML>

<html>

<head>

<title> Untitled document </ title>

<style>

.box {margin: 0 auto; border: 10px solid # 000;}

.dl {width: 200px; height: 200px; background: red; float: left;}

.clear {zoom: 1;}

.clear: after {content: ""; display: block; clear: both;}

/ *

Clear float

1. Add float to the parent

2.Add display: inline-block to the parent

3. Add <dl class = "clear"> </ dl> under the floating element

.clear {height: 0px; font-size: 0; clear: both;}

4. Add <br clear="all"/> under the floating element

5. Add {zoom: 1;} to the parent of the floating element

: after {content: ""; display: block; clear: both;}

** Under IE6,7, the parent of floating element has width

haslayout recalculates the width and height of an element based on the size of the element's content or the size of the parent's parent

display: inline-block

height: (any value except auto)

float: (left or right)

width: (any value except auto)

zoom: (any value except normal)

* /

</ style>

</ head>

<body>

</ dl>

</ body>

</ html>

Add overflow: hidden to the parent of the floating element;

<! DOCTYPE HTML>

<html>

<head>

<title> Untitled document </ title>

<style>

.box {width: 300px; border: 1px solid # 000; overflow: hidden;}

.dl1 {width: 260px; height: 400px; background: Red; float: left;}

</ style>

</ head>

<body>

</ dl>

</ body>

</ html>

What is a Collection Float?

Clear float

IN OTHER LANGUAGES

RELATED ARTICLES

How can we help?