CSS _ float and clear

Floating

Extract the elements from the regular document stream. Is an element that leaves the regular Document Stream

Floating function:

① Achieve the effect of text wrapping

② The block-level elements originally stacked up and down can be changed to the left and right sides, so as to achieve multi-Column Layout

Text wrapping

First, the HTML code is as follows:

Float and clear
     
       


Implementation of text winding image effects
  

Sun Wukong is one of the roles of Wu chengen, a Chinese novelist of the Ming Dynasty, in Journey to the West.
Sun Wukong, a famous practitioner, is a great apprentice of Tang Miao, a master of pig, and Sha Wujing. It will change to, and the cloud will drive the fog.
There is a pair of eye-catching eyes that can see through the disguise of demons and ghosts; A tensortium can turn over 108,000 miles; the use of weapons like a golden hoop can be big and small,
Changes at will. He claimed to be king of Huaguo Mountain and claimed to be the Holy Spirit of Qi tianda. He was under pressure for more than five hundred years under the five-line Mountain as the Buddha's method of fighting.
After the Guanyin Bodhisattva vertices, the Tang Monk is protected to obtain the scriptures from the West. After, it is difficult to retrieve the truth and final result, and it is blocked as a battle to win the Buddha.
It represents the feelings and pursuits of the ancient Chinese, such as kindness, Justice, and injustice.
Sun Wukong was born in Huaguo mountain, a proud nation in Dongsheng Shenzhou. Senpangu development, the three Emperors conquer the world, the Five Emperors dinglun, there is a land overseas, the name is proud to come to the country.
The country is near the sea, and there is a mountain in the sea called Huaguo. This mountain is the ancestor of ten continents, and the ARN of three islands. It was formed after being determined by Hong Meng.
There was a fairy stone on the top of the mountain. The stone has three feet six feet five-inch high, there are two feet around the circle. A three-foot, five-inch high, three hundred and sixty-five degrees on a daily basis;
Every four feet, according to the political calendar 24 gas. There are nine occupational eight holes, according to the nine palace gossip.
Born
Since the beginning of the development of the cover, every naive show, the essence of the Moon, feeling for a long time, then there is a well-informed meaning.
Inspector. Split every day, produce a stone eggs, like a sphere big. Because of the wind, it turns into a monkey.
All features are ready, and all limbs are complete. Then I learned how to climb and learn. Moyun's two golden lights shot at doufu.
After that, I spent time in the Light scene, because I successfully broke into the Water Curtain Cave and was worshipped as "Monkey King" by the monkeys in Huaguo Shan ".

 

The CSS style is as follows:

P{: 0;: }
{: }

 

Running Effect

From, we can see that the image floated to the left, and the text exceeded to the right. When the element floats, the browser pushes it to the top until it hits the internal boundary of the parent element. The elements behind it are no longer considered as floating elements before it. Obviously, if you want to create a multi-column layout, you only need to float it again. Now let's move the p Paragraph.

It can be seen that if several adjacent elements have a set width, they are all floating and the horizontal space is sufficient to accommodate them. They will be placed in parallel in a row, which is the key to using float to create a multi-column layout.
Three methods to enclose floating elements:
First, modify the preceding HTML code:


Float and clear
     
       



Implementation of text winding image effects
  

Sun Wukong is one of the roles of Wu chengen, a Chinese novelist of the Ming Dynasty, in Journey to the West.




Description text in the footer





 
CSS style:
section{: : 0 0 30px 0}
{: 0}
footer{: 2px solid red}

Is displayed in the regular Document Stream
 
Effect after image float:
Method 1: Add overflow: hidden to the parent Element
In fact, overflow has two functions.
① Prevent large content from containing elements
② Force the parent element to include its floating child element
Method 2: floating the parent element at the same time
 
 
To be continued