Float examples and plc programming examples

Float examples and plc programming examples
Float instance description

Float is a powerful attribute. In the actual front-end development process, people often use it for layout. However, sometimes, it is difficult to use it.

For example, now we want to implement a two-column layout, with the left column fixed in width, and the right column automatically expanded in width.

See:

Idea: Use div + float, div1 as the column on the left, div2 as the column on the right, set the width of div1 to a fixed width, and set it to a left floating, out of the document stream; div2 is OK in the normal stream.

For more information about the code, see:

<! DOCTYPE html>

At first glance, it is true that when you manually change the browser width, the div1 width is fixed, and the div2 width is also adaptive.

But what if I add some content to div2?

For example, use a blue div with a width of PX as a sub-element of div2. Let's take a look at the effect.

Depend on me. Isn't that the same as above? What about my blue div ?!!

Open the chrome debugger to see what is going on

I originally wrote div3 in the Document Stream, but it was blocked by div1.

How can this happen?

This is because the floating element is out of the Document Stream, that is, div2 thinks that div1 is not in the Document Stream, so div2 will ignore the existence of div1 and present itself, but after div1 is floating, it is at the upper layer of the Document Stream, so div1 will cover the normal document stream below it.

Then how can we make div3 display in visible div2?

As shown in.

 

If the above effect is displayed, you can set the display of div3 to inline-block. Don't believe it. Try running the code yourself.

Below is the modified Code

<! DOCTYPE html> Why?

This is because the initial purpose of float is to enable text to enclose floating elements and inline elements to enclose floating elements.

Therefore, if you remove div3 and replace it with a large amount of text (enough to enclose div1), set div2 to a higher height than div1, and manually change the browser width gradually, you will find that the text is surrounded by div1.

See

<! DOCTYPE html>  

What if I want to add block-level elements to div2? That is to say, I want div1 and div2 to be two modules that do not interfere with each other. When adding content to the module, there is no impact. What should I do?

We can use margin or padding. Set the margin-left or padding-left of div2 (Adaptive width) to the div1 (fixed width) size. Here I am setting margin-left.

<! DOCTYPE html> Well, it's now today. I wish you a happy Valentine's Day tomorrow ~